Problem to asset deploy with esbuild

Phoenix Forum Questions / Help
,
1

Hello, I updated my project to phoenix 1.6 and I have some errors which do not let me start the project

At first:

after deleting node_modules folder I have this error when I run mix assets.deploy

/elixir # mix assets.deploy
 > js/app.js:17:19: error: Could not resolve "topbar" (mark it as external to exclude it from the bundle)
    17 │ import topbar from "topbar"
       ╵                    ~~~~~~~~

 > js/app.js:19:7: error: Could not resolve "regenerator-runtime/runtime.js" (mark it as external to exclude it from the bundle)
    19 │ import "regenerator-runtime/runtime.js";
       ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I commented them but I do not know what they are

the second error I have

when I run mix assets.deploy my /assets/static which includes images, fonts, js, css and etc are not compiled and I just have a folder in /priv/static/assets which has these file app.js, app.css not the other file I need like phoenix.css and extra css and js file I have on /assets/static

my asset link: https://github.com/shahryarjb/mishka-cms/tree/master/apps/mishka_html/assets
my config: https://github.com/shahryarjb/mishka-cms/blob/master/config/config.exs#L12-L18
my dev: https://github.com/shahryarjb/mishka-cms/blob/master/config/dev.exs#L9-L24

2 Likes
2

as I discovered, all the files which are imported on app.css and app.js like this

@import "./phoenix.css";
@import "../static/css/default-template.css";
@import "../static/css/main.min.css";
@import "../static/css/ckeditor-styles.css";
@import "../static/css/bootstrap.min.css";

when I run mix assets.deploy, they are converted to a single file like app.js or app.css if I want to load files directly on my html I should move the file to priv/static manually, after that I can load it on my html like this

<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/js/bootstrap.min.js")}></script>

but I still have problem with custom fonts

/elixir # mix assets.deploy

 > static/css/default-template.css:6:8: error: No loader is configured for ".woff" files: static/fonts/Vazir-Regular.woff?7ldoi4
    6 │     url('../fonts/Vazir-Regular.woff?7ldoi4') format('woff');
      ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > static/css/default-template.css:3:12: error: No loader is configured for ".eot" files: static/fonts/Vazir-Regular.eot?7ldoi4
    3 │   src:  url('../fonts/Vazir-Regular.eot?7ldoi4');
      ╵             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > static/css/default-template.css:4:12: error: No loader is configured for ".eot" files: static/fonts/Vazir-Regular.eot?7ldoi4#iefix
    4 │   src:  url('../fonts/Vazir-Regular.eot?7ldoi4#iefix') format('embedd...
      ╵             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > static/css/default-template.css:5:8: error: No loader is configured for ".ttf" files: static/fonts/Vazir-Regular.ttf?7ldoi4
    5 │     url('../fonts/Vazir-Regular.ttf?7ldoi4') format('truetype'),
1 Like
3

I am forced to separate font css file and move it to priv/static manually and load it on root.html.heex directly.

<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/font.css")}/>

it should be noted on phoenix 1.6 Map.get(conn.private, :phoenix_live_view) was changed, if you used it on liveview side you have to change your code but if you used it on api base phoenix project you do not need to change your code

4

There’s a step by step guide for upgrading here:

Also I’d suggest comparing with a fresh 1.6 installation, because there’s a few more things different than just not having a node_modules folder.

4 Likes
5

I have read this article and I did it with this article help but This is incomplete on old project :sob: and even it has typo problem.

yes I compared with a fresh 1.6 installation, and now I have no error and my project is running

6

FWIW, I followed the step by step guide you mentioned, hit the same error as @shahryarjb shared, googled and ended up on this thread.

I think the issue is not having set up an esbuild loader to handle the font file-types. Being new to Esbuild myself, I’m not sure what the solution is, but I’ll share it when I find it.

2 Likes
7

It should work if you just add --loader:.woff=file to esbuild config

9 Likes