Regression in x-init behavior since v3.14.4 with Laravel/Livewire integration

[danyderigon]

Description

Since updating Alpine.js to version 3.14.4 (released two days ago), I have noticed a breaking change in the behavior of the x-init directive when used in combination with Laravel and Livewire. This issue was not present in version 3.14.3.

Steps to reproduce

1. Using Laravel 8.83.27, Livewire 2.12.6, and Alpine.js 3.14.4, set up a Livewire component.
2. Include a dynamic wire:key in the markup to trigger re-renders:

   <div wire:key="test-{{ microtime(true) }}">
       <div x-init="console.log('Hello World')">
           <!-- Code that requires JavaScript re-initialization (e.g., charts, PDF viewers, etc.) -->
       </div>
   </div>

3. Trigger a Livewire render, for example, by interacting with the component or emitting an event.

Expected behavior

In version 3.14.3 and earlier, each time the Livewire component re-renders, the wire:key changes, the <div> is regenerated, and x-init is executed again. This logs Hello World to the console on every re-render, which is crucial for re-initializing JavaScript-dependent components (charts, viewers, etc.).

Observed behavior

Starting with version 3.14.4, the x-init directive no longer re-executes after a Livewire re-render. This causes major issues in my project because components that depend on JavaScript initialization (like charts or custom viewers) are not being properly re-initialized.

Environment details

• PHP version: 7.4
• Laravel version: 8.83.27
• Livewire version: 2.12.6
• Alpine.js version: 3.14.4
• Browser: (tested on Chrome and Firefox, same behavior)

Additional context

Due to infrastructure constraints, we are currently on an older version of Laravel and PHP. Despite this, the issue seems specific to changes introduced in Alpine.js 3.14.4, as downgrading to 3.14.3 resolves the problem.

This regression significantly impacts our ability to use Alpine.js in conjunction with Livewire for dynamic components. Please investigate and let me know if there are any workarounds or upcoming fixes.

Thank you for your help!

[hugronaphor]

Seems to be caused by #4000

As per #4000 (comment) yes, my Livewire V2 is messed up

[chosten]

In our case, we have a modal with a top-level x-data and an inner autonomous Alpine component (with its own x-data). Everything works fine on Alpine 3.14.3, but starting from 3.14.4 the nested component doesn’t initialize anymore. There are no console errors, it just silently fails to boot.
Removing the parent x-data makes the child work again, but that’s not really an option for us.

It looks like the regression in how x-init interacts with Livewire re-renders (mentioned above) is exactly what’s breaking our setup.

I suppose there is no fix planned ?
Also, does anyone know if this behaves differently with Livewire 3 ?

[ekwoka]

Does it also not work in the newest?

I believe newest Livewire comes with newest Alpine as well, so they are compatible. Maybe there needs to be some info on the Livewire site for Livewire -> Alpine version combinations. Or doesn't Livewire enforce a specific Alpine version normally?