After Phoenix / Liveview updates: JS Module not found

mensore · May 20, 2023, 11:28am

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.

gist.github.com

https://gist.github.com/chrismccord/00a6ea2a96bc57df0cce526bd20af8a7?ref=blixt-dev

phoenix-1.6.x-1.7-upgrade.md

## Upgrading from Phoenix v1.6.x to v1.7.0

Most of the new features and requirements for v1.7 are optional and many folks will simpy be able to bump their `mix.exs` version and compile without issue, though a few warnings will be reported.

### Pre-requirements

Before upgrading Phoenix itself to v1.7, we recommend first updating some Phoenix dependencies in `mix.exs`: `phoenix_view` (add it if missing), `phoenix_live_view` (if you were explictly using LiveView before), and `phoenix_live_dashboard`.

```elixir
def deps do

This file has been truncated. show original

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?

codeanpeace · May 20, 2023, 7:04pm

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.

github.com

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


      
          def live_view do
            quote do
              use Phoenix.LiveView,
                layout: {<%= @web_namespace %>.Layouts, :app}
          
          
    unquote(html_helpers())
            end
          end

github.com

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


      
          defp html_helpers do
            quote do
              # HTML escaping functionality
              import Phoenix.HTML
              # Core UI components and translation
              import <%= @web_namespace %>.CoreComponents<%= if @gettext do %>
              import <%= @web_namespace %>.Gettext<% end %>
          
          
    # Shortcut for generating JS commands
              alias Phoenix.LiveView.JS
          
          
    # Routes generation with the ~p sigil
              unquote(verified_routes())
            end
          end<% end %>