I finally managed to find a solution on the Hotwire discuss.
I prepended this require to app.js:
import "regenerator-runtime/runtime"
And now it’s working.
mfilej
mfilej
However I would still be interested in an explanation why this was needed for me (and doesn’t seem needed for most people?). Maybe this is something that needs to be mentioned in the AlpineJS readme?
0
Sebb
AllanPinheiroDeLima
Hi, this has been asked a while ago, but, even though I followed your guide, my live view pages still have no interactivity through Alpine. I mean, Alpine is not even being loaded when I look at the window object.
Do you know if the newer phoenix versions have problems with Alpine ?
0
stryrckt
If you are using the latest version of Alpine.js (v3), you will need to make some changes in how you set it up.
Alessandro Di Maria has a short guide on the changes you need to make in this article: Update LiveView for Alpine.js 101 - DEV Community.
4
Sebb
Is there any documentation (besides the sources) that explains this? I used Alpine with liveview some times now and I’d like to understand the magic that’s going on here.
0
AllanPinheiroDeLima
AllanPinheiroDeLima
Hi, I came back to say that I did the inclusion of Alpine in a slightly different manner. I’m using Alpine 3.2.1 and the snipped showed in the post helped, but didn’t solved all the problems I was having. So I’m leaving my snippet for anyone who comes across the same problem and can’t solve using the post:
Edit: I also should mention that maybe I have something wrong in my code that forces me to do things this way. I’m a beginner at Elixir/Phoenix, so if something looks off about this code or the approach, please, correct me 
// FIRST IMPORT THE ALPINE MODULE AS YOU ARE USED TO
import Alpine from 'alpinejs';
// I'VE ALSO ATTACHED IT TO THE WINDOW OBJECT
window.Alpine = Alpine;
let liveSocket = new LiveSocket("/live", Socket, {
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) {
window.Alpine.clone(from.__x, to);
}
if (from._x_dataStack) {
window.Alpine.clone(from, to);
// I HAD TO INITIALIZE THE TREE EVERYTIME IT UPDATES.
// I WAS FACING "Alpine is not defined" ERROR WHEN I DIDN'T
window.Alpine.initTree(to)
}
}
},
params: { _csrf_token: csrfToken },
})
...
// DON'T FORGET TO START ALPINE AND DON'T PUT THIS SNIPPET
// INSIDE THE onBeforeElUpdate HOOK.
// I KNOW THAT SEEMS IRRELEVANT, BUT IT COULD CAUSE A MASSIVE MEMORY LEAK
// BECAUSE IT WILL DUPLICATE ALL LISTENERS EVERYTIME THE VIEW UPDATES
Alpine.start()
Thank you for the help!
1