evolvingdev

evolvingdev OP

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");

0
Post #12
evolvingdev

evolvingdev OP

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
Post #13
wanton7

wanton7

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

0
Post #14
evolvingdev

evolvingdev OP

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?

0
Post #15
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()
5
Post #16
evolvingdev

evolvingdev OP

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
Post #17
— All posts loaded —