ant

ant

How to load javascript function in heex script tag

I have a ‘marker_clustering.js’ file in ‘assets/vendor’ directory.
This file defines a constructor function called MarkerClustering and has an export default MarkerClustering directive.

In the ‘app.js’ file, there is an import MarkerClustering from "../vendor/marker_clustering" declaration.

In the ‘root.html.heex’ file, load the ‘app.js’ file as follows:
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"} />

In the above situation, if you use the ‘MarkerClustering constructor’ in the script tag of the ‘home.html.heex’ file, the following error will appear in the browser console:
Uncaught ReferenceError: MarkerClustering is not defined

Even if I assign MarkerClustering to windows.MarkerClustering, this problem is not solved.

I wonder what to do in this case.

Most Liked

garrison

garrison

By default, your JS is bundled by ESBuild, so when you import an ES module it gets bundled up and converted into a function (an IIFE) which is evalulated when the script is loaded. If you open up your browser devtools and have a look at the JS that is actually loaded, you should be able to see all of the Phoenix code and your code bundled up in app.js. Have a look and see if the code you are expecting is in there, and if anything looks wrong.

Also, there’s a typo in your import statement (three dots should be two dots). I don’t think that syntax is valid - is ESBuild raising an error in your terminal during compilation? (Edit your app.js to trigger a recompile and look for errors).

Where Next?

Popular in Questions Top

JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
jc00ke
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217 Let’s say I have a map with required and optional k...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Other popular topics Top

pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

We're in Beta

About us Mission Statement