Alpinejs not working in phoenix (without liveview)

evolvingdev

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?

16 comments

/phoenix #javascript #alpinejs

0 2449 16

2021-07-03 11:56:36 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

evolvingdev

Yes, thanks, but is that necessary if I didn’t install phoenix with liveview?

Post #2

Sebb

Oh sorry, no thats just for liveview.

Post #3

evolvingdev

Thanks for the help and suggestion anyways!

Post #4

wanton7

Are you sure alpinejs is installed? Check your node_modules

Post #5

evolvingdev

Haha, I wondered the same earlier, thanks. But, yeah, and it’s package.json:

    "name": "alpinejs",
    "version": "3.2.1",
    "description": "The rugged, minimal JavaScript framework",
    "author": "Caleb Porzio",
    "license": "MIT",
    "main": "dist/module.cjs.js",
    "module": "dist/module.esm.js",
    "unpkg": "dist/cdn.min.js",
    "dependencies": {
        "@vue/reactivity": "^3.0.2"
    }
}

Post #6

kokolegorille

Where is alpinejs? I don’t see it in the dependencies… unless You are showing package.json from alpinejs in node_modules.

Post #7

evolvingdev

Yes, that’s the package.json file from myapp/assets/node_modules/alpinejs.

Here’s what I get from:

cd myapp/assets/

npm list --depth=0

assets@ /Users/Me/dev/myapp/assets
├── @babel/core@7.14.6
├── @babel/preset-env@7.14.7
├── @tailwindcss/forms@0.3.3
├── @tailwindcss/typography@0.4.1
├── alpinejs@3.2.1
├── autoprefixer@10.2.6
├── babel-loader@8.2.2
├── copy-webpack-plugin@5.1.2
├── css-loader@3.6.0
├── hard-source-webpack-plugin@0.13.1
├── mini-css-extract-plugin@0.9.0
├── node-sass@4.14.1
├── optimize-css-assets-webpack-plugin@5.0.8
├── phoenix_html@2.14.3 -> /Users/Me/dev/myapp/deps/phoenix_html
├── phoenix@1.5.9 -> /Users/Me/dev/myapp/deps/phoenix
├── postcss-loader@4.2.0
├── postcss@8.3.5
├── sass-loader@8.0.2
├── tailwindcss@2.2.4
├── terser-webpack-plugin@2.3.8
├── webpack-cli@3.3.12
└── webpack@4.46.0

Post #8

wanton7

Do you have

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: {
    onBeforeElUpdated(from, to){
      if(from.__x){ window.Alpine.clone(from.__x, to) }
    }
  }
})

as mentioned here How to combine Phoenix LiveView with Alpine.js · FullstackPhoenix

Post #9