Alpinejs not working in phoenix (without liveview)

Phoenix Forum Questions / Help
, ,
1

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?

3

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

4

Oh sorry, no thats just for liveview.

5

Thanks for the help and suggestion anyways!

6

Are you sure alpinejs is installed? Check your node_modules :wink:

7

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"
    }
}
8

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

9

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
10

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 - Tutorials and screencasts for Elixir, Phoenix and LiveView

11

My install of phoenix is without liveview, so I should need that, right?

12

Oh then you don’t need it. If it works from cdn then alpinejs is not loaded correctly. Have you checked browser’s dev tools console for errors?

13

Yeah, alpinejs appears not to be installed properly, and as I noted in my original comment, it appears I may have broken js in phoenix because I’m also getting a related POW error (link to that provided).

I’m not seeing any errors in my browser’s dev tools console, and the debugger is show:

webpack-internal://js/app.js contains:
/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");

14

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.

1 Like
15

Go old school and put alert('hello!'); into your app.js and see if you even get that alert.

16

Haha, thanks - been a long day… and so I forget the obvious!

Yes, that works, and it confirms my browser’s debugger console showing app.js is read (as in my previous comment).

So how can we test where alpinejs is not working?

17

With some googling I found this that quite likely is problem you are facing gruntjs - How to import AlpineJS with NPM? - Stack Overflow

From alpinejs installation docs here Installation — Alpine.js you need to do this

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()
5 Likes
18

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.

1 Like