Reports

Problem

While debugging, I noticed the following warning in the browser console:

livewire.js?id=df3a17f2:10202 Detected multiple instances of Alpine running

This message suggested that Alpine.js was being loaded more than once, which causes conflicts in applications using Livewire.

Investigation

In Livewire v3.x, assets (JavaScript and CSS) are automatically injected into the <head> and <body> of pages containing Livewire components. This behavior is controlled via the inject_assets option in the config/livewire.php file:

'inject_assets' => true,

However, in my application, I was also manually initializing Alpine in resources/js/app.js like this:

import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

window.Alpine = Alpine // This line was causing the conflict
Alpine.plugin(persist)

This led to two Alpine instances being initialized—one by Livewire and one manually—which triggered the warning and broke expected behavior.

Solution

Here's what I did to fix it:

Commented out the line initializing the global Alpine instance in app.js:

// window.Alpine = Alpine

Updated the livewire.php config to prevent automatic asset injection:

'inject_assets' => false,

Manually added the Livewire assets in the Blade layout file:

@livewireStyles
@livewireScripts

Restarted the application to apply the changes. After doing this, everything worked smoothly—no more console warnings, and Livewire + Alpine behavior was as expected.

Note

I didn’t change anything in the model binding logic. The original binding remained untouched:

<form wire:submit.prevent="{{ $isEdit ? 'update' : 'store' }}">
    <input type="text" wire:model="name">
</form>

This workaround resolved the issue for me. While it might not be the most optimal or official solution, it got things working. Hopefully, this helps someone facing a similar problem.

79599570