Livewire 3 and Laravel Breeze Error: Alpine.js Conflict

If you try to use Livewire 3 with the Laravel Breeze starter kit, you may notice that your components are not reactive, and some Livewire features just don't work. The reason may be Alpine.js, which is loaded twice. Let me show you how to fix it.

In the browser console, you might have seen the following error:

Or any other error like this:

  • Uncaught TypeError: window.Alpine.cloneNode is not a function
  • Uncaught (in promise) TypeError: Alpine.navigate is not a function
  • Uncaught (in promise) TypeError: l is not a function
  • Uncaught TypeError: Alpine.store is not a function
  • And many more!

This error is caused by Livewire and Breeze conflict:

  • Laravel Breeze has Alpine.js enabled by default in the resources/js/app.js file
  • Livewire v3 also comes with Alpine built-in and pre-configured already

But don't worry. You can fix it in a few simple steps:

The Solution

  • Step 1: Open resources/js/app.js
  • Step 2: Remove the following lines:
import Alpine from 'alpinejs';
 
window.Alpine = Alpine;
 
Alpine.start();
  • Step 3: Run npm run build to build your assets again.
  • Step 4: Open resources/views/layouts/app.blade.php
  • Step 5: Add @livewireStyles and @livewireScripts like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
 
        <title>{{ config('app.name', 'Laravel') }}</title>
 
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')
 
            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif
 
            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    @livewireScripts
    </body>
</html>

That's it! You have just disabled Alpine from Breeze and allowed the Livewire built-in Alpine to do its job.

You should now have a reactive component and no more errors on your console.

Login or register to comment or ask questions
avatar
Steen Rabol

Nice information, but wath if you don't use livewire on all your pages and then need Alpine?

avatar
Modestas

I think that it is still available as it came from Livewire pre-bundled. That's why we had this issue

avatar
Steen Rabol

yes if you include @Livewirescripts on every page

avatar
Colman Byrne

just installed new Laravel 10 project and then breeze blade only and then livewire

breeze profile page will not work if you remove these lines , left in they work fine and do not cause any error

looks like conflict has been resolved

avatar
Modestas

You are right, I missed the delete button. You have to add:

@livewireStyles and @livewireScripts to your resources/views/layouts/app.blade.php in order to have everything working.

Updating the article, thanks both of you guys!

avatar
Steen Rabol

well... not all breeze components uses Alpine, and if you use Alpine in 'none-breeze' components, you will still have a minor challange unless you have @LivewireScripts in your layout, then you shuld be fine - but then.... you also load Livewire on all the pages where you don't need it.

avatar
Modestas

Yep, but there was one component that used alpine. Added the livewire styles to fix this!

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 50 courses (910 lessons, total 46 h 42 min)
  • 69 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials