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

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
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
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
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
sabri
Can someone explain the settings of pool_size of Ecto in config file? and what is the recommend size? Thanks
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
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

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1140 51847 244
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
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New

We're in Beta

About us Mission Statement