evolvingdev
Alpinejs not working in phoenix (without liveview)
I’ve installed tailwindcss but oddly can’t get alpinejs to work unless I link to a cdn, which defeats my goal. Added to that, when signing out via POW, I’m getting:
no route found for GET /session
I get the same error whether I use the POW after_sign_out_path or not. This error appears related to javascript as discussed here:
Somehow I think I’ve broken js in my Phoenix install.
My assets/js/app.js:
import "../css/app.scss"
import "alpinejs"
import "phoenix_html"
My lib/myapp/pow/routes.ex:
defmodule MyWeb.Pow.Routes do
use Pow.Phoenix.Routes
alias MyWeb.Router.Helpers, as: Routes
def after_sign_in_path(conn), do: Routes.notification_path(conn, :index)
def after_sign_out_path(conn), do: Routes.page_path(conn, :index)
end
From my app.html.eex navbar:
<%= link "Sign out", to: Routes.pow_session_path(@conn, :delete), method: :delete %>
Where do I begin to work out why this is happening?
Marked As Solved
wanton7
With some googling I found this that quite likely is problem you are facing https://stackoverflow.com/questions/64909690/how-to-import-alpinejs-with-npm
From alpinejs installation docs here Installation — Alpine.js you need to do this
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Also Liked
evolvingdev
It looks like my error was in the ordering of imports in my assets/js/app.js:
import "../css/app.scss"
import "alpinejs"
import "phoenix_html"
This appears to fix alpine.js:
import "../css/app.scss"
import "phoenix_html"
import "alpinejs" // <-- moved here
I’ll do a quick clean install and mark this as the solution if it still works (doing because I’ve experienced the hardsource cache bug too today).
Update: The above order change didn’t fix alpinejs not working.
evolvingdev
Many many thanks (and to everyone else here that helped me)!
None of the tutorials I found online included that info.
Reminds me to always check the docs!
This is an awesome community.
Popular in Questions
Other popular topics
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
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








