Problem to asset deploy with esbuild

shahryarjb

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: mishka-cms/apps/mishka_html/assets at master · shahryarjb/mishka-cms · GitHub
my config: mishka-cms/config/config.exs at master · shahryarjb/mishka-cms · GitHub
my dev: mishka-cms/config/dev.exs at master · shahryarjb/mishka-cms · GitHub

6 comments

/phoenix #troubleshooting

2 6519 6

2021-09-30 20:34:12 UTC

Showing Posts 1 to 6

Show Best Posts
Show All (oldest first)
Show All (newest first)

shahryarjb

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'),

Post #1

shahryarjb

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

Post #2

LostKobrakai

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.

Post #3

shahryarjb

I have read this article and I did it with this article help but This is incomplete on old project 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

Post #4

AlchemistCamp

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.

Post #5