finally solved it

non of the above will work if you don’t do the following:

from esbuild

Note that when code splitting is disabled (i.e. the default behavior), an import('path') expression behaves similar to Promise.resolve(require('path')) and still bundles the imported file into the entry point bundle. No additional chunks are generated in this case.

so you must first configure the esbuild inside config.exs like so:

~w(js/app.js css/quill.css --chunk-names=chunks/[name]-[hash] --bundle --outdir=../priv/static/assets --splitting --format=esm --target=es2016),

then in your template you must change the app.js type like so (type=“module” otherwise you will get errors that you can’t use imports outside a module …):

<script defer phx-track-static type="module" src={Routes.static_path(@conn, "/assets/js/app.js")}></script>

now the code will load from the generated chunks

image940×588 57.7 KB