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?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #performance
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 2 of 2 Posts!
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 bymix phx.gen.liveshould containuse MyAppWeb, :live_viewwhich depends on theMyAppWebmodule defining alive_viewfunction sets up the proper alias.For example, newly generated Phoenix apps via
mix phx.new MyAppdefines 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
mensore
Apologies for the late reply! I went over the components and there were missing aliases ( for some reason?).