Currently Breaks with Alpine.js & Livewire about alpine-turbo-drive-adapter

[SimoTod]

Thanks @tonysm
I switched from turbo:load to turbo:render because of #29
A few people needed it (I wasn't too sure because I was a bit worried something else would break and... Here we are, hahha). I assume turno:render runs too early and the browser hasn't run the livewire javascript yet (which injects the $wire helper in alpine) since it's in the body. Probably we just need to wait a frame, I'll double check this week

[SimoTod]

Closing for now as I'm not planning to support v1. Please reopen if it's still an issue with v2 and Alpine 2

[SimoTod]

Hi @tonysm ,i need to have a look. $wire is a property defined in livewire and injected in Alpine at runtime but it's not part of the core and I have never tried the adapter with Livewire. I'll keep you posted.

P.s. Depending on your use case, Alpine would work ok with Turbo without the adapter so you might not need it but Alpine tends to break in some specific edge cases (they are more or less mentioned in the changelog)

[SimoTod]

Hi @tonysm

unfortunately, I wasn't able to replicate the issue. I tried with a vanilla installation, then I've also tried your app (after re-adding the adapter) and I couldn't see the error. Can you send me some instructions to replicate please?

[tonysm]

Uhm, weird. Trying it one more time over here. Will also give it a try on a new install.

[tonysm]

Uhm. It happens when opening the Jetstream pages (team settings, profile).

[SimoTod]

Cool, I'll give it a go. Does it happen when I visit the page or do I have to click something specific?

[tonysm]

uhm, interesting. The last version that works for me is 1.0.1. The other ones fail because of the arrow function being used in the [x-cloak] handling. And after that the 1.1.0 fails here.

[tonysm]

@SimoTod it happens when you go from one page to one of the Jetstream pages, not if you refresh straight on that page.

[tonysm]

OK, so I think the issue has to do with Livewire's entangle and Turbo.

Based on what I tried here, when you use entangle, the component gets evaluated to window.Livewire.find({COMPONENT_ID}).entangle() and that does not seem to work nicely with Turbo when you are visiting a page that uses this.

Laravel Jetstream's modal uses entangle (source).

The issue only happens when navigating to a page that has a Livewire component using entangle from another page (from / to /second via the menu in the demo below).

I don't think pushState has anything to do with this (as it also happens in private windows the first time you visit the second page, so there is no "cached page").

Got a simpler demo with the issue working here: https://github.com/tonysm/livewire-alpine-turbo-entangle-issue/blob/main/app/Http/Livewire/Counter.php#L22

I tried without the adapter and it works well. I tried with version 1.0.4 and it works well. So I think it has to do with something in 1.1.0.

I don't know exactly where the issue is at right now but will keep digging next weekend.

OK, so I think the issue has to do with Livewire's entangle and Turbo.

Based on what I tried here, when you use entangle, the component gets evaluated to window.Livewire.find({COMPONENT_ID}).entangle() and that does not seem to work nicely with Turbo when you are visiting a page that uses this.

Laravel Jetstream's modal uses entangle (source).

The issue only happens when navigating to a page that has a Livewire component using entangle from another page (from / to /second via the menu in the demo below).

I don't think pushState has anything to do with this (as it also happens in private windows the first time you visit the second page, so there is no "cached page").

Got a simpler demo with the issue working here: https://github.com/tonysm/livewire-alpine-turbo-entangle-issue/blob/main/app/Http/Livewire/Counter.php#L22

I tried without the adapter and it works well. I tried with version 1.0.4 and it works well. So I think it has to do with something in 1.1.0.

I don't know exactly where the issue is at right now but will keep digging next weekend.

I am not even using alpine-turbo-drive-adapter package in a livewire app with turbo and I am getting the same error. So It has to do something with livewire and turbo.
@entangle is a laravel blade wrapper around $wire which gets injected by livewire into alpine component

[tonysm]

I've tried this on a fresh Laravel install with Jetstream. Without the adapter navigating to a page that uses entangle works. It only breaks after adding the Alpine adapter.

@SimoTod so the issue you mentioned that made you change from turbo:load to turbo:render was because elements using alpine could be returned from a non-422 response and those were not working?

[tonysm]

@SimoTod yep, I changed the turbo:render to turbo:load in the bundled JS file and the entangle just works. That seems to be the issue.

It sounds like an upstream bug in Turbo.js, no? As I see it, it should dispatch the turbo:load when it receives a 422 response with an HTML body. Otherwise it will replace the page, but no event will be dispatched. I'm trying to see if I can reproduce it there.

[tonysm]

I've created an issue in the Turbo.js repository (see the last reference above). After reading the issue again, I have a "workaround" in mind. We could hook into the Blade parsing and append a Stimulus controller to elements that have x-data or x-init on them, this Stimulus controller would boot alpine on that element.

Would require using Stimulus, though. 😢