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

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&amp;query=perfume&amp;page=2, I would like to get: ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call t...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
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
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
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
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New

We're in Beta

About us Mission Statement