Accessing JS from priv/static/assets

I am importing JS via assets/js/app.js ie import "./name_of_file". In the browser, under sources, I can see assets/js/name_of_file.js but when I call it from priv/static/assets/test/index.js via import { fun } from "../js/name_of_file.js"; I get a 404… what am I doing wrong?

Loading module from “http://localhost:4010/assets/js/name_of_file.js” was blocked because of a disallowed MIME type (“text/html”).

What do you mean by “when I call it from priv/static/assets/test/index.js”? You shouldn’t be accessing stuff directly in that directory, it’s where assets get compiled to.

all 3rd party libs are placed there… d3, FA, and they have no issue. Index comes from a 3rd party. Its will not be modified… its static.

Third party libs are supposed to go in assets/vendor. It can work if you put it directly in priv/static but not I’m really sure what consequences of that could be, especially when it comes to deployment.

how do I access them from there?

<script defer type="text/javascript" src={Routes.static_path(@conn, "/assets/vendor/d3/d3.js")}></script>

that does not work, for example

Ah, I’m not actually sure how to do that. I’ve only ever imported vendored stuff it in my assets/js/app.js and then it all gets bundled into priv/static/assets/app.js. If I only wanted some JS available in some parts of the site (like an admin or whatever), I would split up the bundles and link them in the different layouts. I haven’t actually done that before, though, so can’t give you an example of how to do so off the top of my head.

EDIT: Have a look at the config :esbuild line in config/config.exs if you are interested in doing something like that. I know esbuild is quite flexible when it comes to tweaking bundles to your liking. Otherwise the path of least resistance is just to have a single app.js.

Does anyone know how to access prov/static like <script defer type="text/javascript" src={Routes.static_path(@conn, "/assets/vendor/d3/d3.js")}></script> ?