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");
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.
Go old school and put alert('hello!'); into your app.js and see if you even get that alert.
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?
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()
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.