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?

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.

1 Like

Apologies for the late reply! I went over the components and there were missing aliases ( for some reason?).