Questions & Help>Questions

After Phoenix / Liveview updates: JS Module not found

/phoenix#liveview#core-component
mensore

mensore

After Phoenix / Liveview updates: JS Module not found

I recently updated my Phoenix app to 1.7.0 as well as my LiveView to 0.18.
I followed this guide for the required changes as well as the optional updates.

The app compiles, and everything seems to work fine except when I generate a new live view with mix generate command (mix.phx.gen.live). The JS methods (and the JS module it self?) seems to be the source of the error; the console outputting: JS Module not found (as well as my linter yelling at me). For example, if I create a new Products live view with the mix.gen command, and I try to click on the new button for creating a new product, the app crashes with: JS.push/2 is undefined (found in the product new, where it uses the <.modal>).

The <.flash_group flash={@flash} /> as well is kinda weird. It works as expected when displaying a flash message; however, I can’t see the <.icon /> for the close button (although the hover effect is there). And the JS close method also does not work.

Any ideas / hints / direction to look to solve this issue?

2 comments
#core-component
1 1057 2

Marked As Solved

codeanpeace

codeanpeace

That’s odd… off the top of my head, I definitely verify it’s aliased properly i.e. alias Phoenix.LiveView.JS. The code generated by mix phx.gen.live should contain use MyAppWeb, :live_view which depends on the MyAppWeb module defining a live_view function sets up the proper alias.

For example, newly generated Phoenix apps via mix phx.new MyApp defines the following.

https://github.com/phoenixframework/phoenix/blob/3f671d7aee310465a57ff5c626f7ca1e44897589/installer/templates/phx_single/lib/app_name_web.ex#L52C1-L59

https://github.com/phoenixframework/phoenix/blob/3f671d7aee310465a57ff5c626f7ca1e44897589/installer/templates/phx_single/lib/app_name_web.ex#L82-L96

1
Post #2

Where Next?

View thread on forum (has 2 responses!)
phoenix
liveview
core-component
Home Questions & Help>Questions
/phoenix#liveview#core-component
1 1061 2
Last post

Popular in Questions Top

rms.mrcs
Questions & Help>Questions

Transform a list into an map with indexes using Enum module
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
35 32831 9
New
minhajuddin
Questions & Help>Questions

Using List.first instead of Enum.at(0)
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 ...
#code-style
76 33670 14
New
qwerescape
Questions & Help>Questions

How to get the call stack/stack trace at any point in code?
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
53 16124 4
New
joaquinalcerro
Questions & Help>Questions

What is the best approach for fetching large amount of records from postgresql with ecto
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
#ecto
126 24824 27
New
hariharasudhan94
Questions & Help>Questions

What is the best IDE for elixir?
I would like to know what is the best IDE for elixir development?
#code-editors
33 49662 23
New
mcarvalho
Questions & Help>Questions

System.get_env vs. Application.get_env
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
#environment
13 17200 6
New
vac
Questions & Help>Questions

Formatting a string to PEM with headers and line breaks
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
2 14822 7
New
JulienCorb
Questions & Help>Questions

Protocol Enumerable not implemented for
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: &lt;h1&gt;Create Post&lt;/h1&gt; &lt;%= ...
/phoenix
4 14941 7
New
aalberti333
Questions & Help>Questions

Enum.map over list of key/value pairs with a map as the value
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
#enummap
7 19866 6
New
JorisKok
Questions & Help>Questions

How is it possible to get 2 million websocket connections when you have 65536 available ports?
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% ...
/phoenix
20 18548 4
New

Other popular topics Top

johnnyicon
Questions & Help>Questions

How do I use the Postgres JSONB / Postgrex JSON extension?
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
#ecto
22 17673 9
New
jononomo
Questions & Help>Questions

Where / How does the Mix environment variable get set?
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
#mix
31 23040 9
New
hariharasudhan94
Questions & Help>Questions

How to use return statement with if condition in elixir?
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
/phoenix
10 20190 6
New
lessless
Questions & Help>Questions

How are you dealing with CSV files that uses CR line breaks?
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 ...
#how-to-question
10 18614 17
New
openscript
Questions & Help>Questions

How to set up the Elixir SDK in Intellij IDEA with the intellij-elixir plugin?
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
17 23170 9
New
greenz1
Questions & Help>Questions

Best way to send multiple files as HTTP response
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
/phoenix#api
3 18924 3
New
gshaw
Questions & Help>Questions

Idiomatic guard clause for checking not nil
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
#guard-clauses
13 43527 3
New
AstonJ
Chat & Discussions>Discussions

LiveView demos, examples, and sample apps thread!
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
/phoenix#liveview
232 30566 60
New
aalberti333
Questions & Help>Questions

Enum.map over list of key/value pairs with a map as the value
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
#enummap
7 19866 6
New
stefanluptak
Questions & Help>Questions

Using VSCode on multiple monitors
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
#vscode#vscode-elixir
7 17888 6
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement