Detected multiple instances of Livewire running

Hello,

I start a new personal project with Livewire and I get this warning in the console.

Detected multiple instances of Livewire running

Detected multiple instances of Alpine running

Livewire: missing closing tags found. Ensure your template elements contain matching closing tags.

I have checked, all the tags are closed and I don't inject the assets manually.

When I check the DOM, I see Livewire script twice.

<script src="/livewire/livewire.js?id=951e6947" data-csrf="I8Ye7lwi9wFxsfxiQ25zvsMcWGfrQcqcmT5sNIrM" data-update-uri="/livewire/update" data-navigate-once="true"></script>
<script src="/livewire/livewire.js?id=951e6947" data-csrf="I8Ye7lwi9wFxsfxiQ25zvsMcWGfrQcqcmT5sNIrM" data-update-uri="/livewire/update" data-navigate-once="true"></script>

I never had this warning in previous projects, even with Livewire v3.

A similar issue is described by Caleb Porzio in August 2023.

https://github.com/livewire/livewire/pull/6493

It seems I get the same issue with the last Livewire version (3.5), but without navigating ... I mean I get the error just at first load of the home page.

Any idea ?

Thanks for your help.

Snapey

1 year ago

Best Answer

Level 122

Do you have some unusual arrangement of templates?

1 like

vincent15000

1 year ago

Level 63

@Snapey I only have a template in the components/layouts folder. And the view is extended with the layout.

<x-layouts.app>
	<div>
		...
	</div>
</x-layouts.app>

vincent15000

1 year ago

Level 63

@Snapey Ok that's it ! I have written the views with the layout explicitely mentionned, whereas it's automatically added by Livewire.

So I have removed the layout and it's ok.

LaryAI

1 year ago

Level 58

The issue you're encountering with "Detected multiple instances of Livewire running" and "Detected multiple instances of Alpine running" is typically due to the Livewire and Alpine scripts being included more than once on the page. This can happen if the scripts are being loaded in multiple places, such as in a layout file and a component, or if there are multiple layout files being used.

Here are some steps to troubleshoot and resolve the issue:

Check Blade Layouts and Components:
- Ensure that the Livewire and Alpine scripts are only included once in your Blade templates. Typically, these scripts should be included in your main layout file (e.g., layouts/app.blade.php).

Use @livewireScripts and @livewireStyles:

Make sure you are using the @livewireScripts and @livewireStyles directives in your Blade templates. These directives ensure that the scripts and styles are only included once.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App</title>
    @livewireStyles
</head>
<body>
    @yield('content')

    @livewireScripts
</body>
</html>

Check for Duplicate Inclusions:
- Inspect your Blade files to ensure that you are not including the same layout or partial multiple times, which could lead to duplicate script tags.
Inspect the DOM:
- Use the browser's developer tools to inspect the DOM and verify that the Livewire and Alpine scripts are not duplicated. If they are, trace back to see where they are being included from.
Review Recent Changes:
- If this issue started occurring after a recent change, review those changes to see if any new includes or layout modifications might have introduced the duplication.
Check for Third-Party Packages:
- If you are using third-party packages that might include Livewire or Alpine scripts, ensure they are not causing the duplication.
Update Livewire and Alpine:
- Ensure you are using the latest versions of Livewire and Alpine, as updates might have addressed similar issues.

By following these steps, you should be able to identify and resolve the issue of multiple instances of Livewire and Alpine being detected. If the problem persists, consider creating a minimal reproducible example and sharing it for further assistance.

Please or to participate in this conversation.