evolvingdev

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:

Pow session path not working

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

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

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

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.

Where Next?

Popular in Questions Top

rms.mrcs
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. ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement