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!

avatar
Veggie Wear

Hi, I am getting confused sorry for the newb question. I have set up a new Laravel 10 project with Breeze and things are not going to plan, does Alpine and Taiwind work right away? I added some basic Alpine code on a blade file to check if Alpine is working out of the box, and it does not work. I even installed the Alpine Chrome extension and it says Alpine is not detected.

I ran npm run build and npm run dev but this did not help, I tested with the Alpine CDN link, and the code works fine and the extension shows Alpine working.

If I install Breeze in a new Laravel project is there anything I need to do to get tailwind and alpine working well?

It's a fresh install with just breeze installed I also added this to head of the blade file.

@vite('resources/css/app.css', 'resources/js/app.js')

If I install Breeze in a new Laravel project is there anything I need to do to get tailwind and alpine working well?

Thanks

avatar
Modestas

Both of them should be available for you to use. Or at least it used to be.

Which Breeze version did you install? (there are many UI options to choose when setting it up)

avatar
Veggie Wear

Hi thanks for the reply, i really appreciate it. I installed a brand new laravel project via Herd and chose Breeze install. I asked the same question on larvel froum and one guy said did you build assests, I asked if building asets is npm run build but no response. It's weird as i thought it would work out of the box, ive used Herd, Db engine and using php storm. but Alpine is not working and Tailwind is Janky. Is there something i need to do or something i can check?

Thanks again

avatar
Modestas

You do need to build them with npm run build - that's correct.

As why it might not work correctly - there could be a few things wrong there:

  1. Check your browser console logs for any errors
  2. Make sure that the NPM build is a success
  3. Make sure that your .env has correct APP_URL set (without / at the end)

Other than that, it would be best to get some kind of code examples of what is not working or what is happening. There are many configuration things that can impact this.

avatar
Veggie Wear

I think i found the issue, I made a brand new laravel project with Herd and it was saying 404 with an error sayiing valet not found when checking the site, with server configured etc. I unistalled Valet completley off machine and low and behold the app started again and Alpine is working perfectly. Very weird as herd should be able to work even with Valet installed?

Maybe a bug of sorts?

thanks

avatar
Modestas

No idea, haven't used herd before. But happy that the issue is solved!

avatar
Patas Locas

thanks you so much!

avatar
gabriel

I did every step in this post but I still have issues! I just don't get any errors in the console, but the navigation that Breeze brings as default doesn't work and I don't know what to do. Please help me

👍 1
avatar
gabriel

Before this post I did get the error in the console, after removing the Alpine import in the app.js, and npm run build (I already had the @liveWireScripts and @liveWireStyles in the app.blade), the error dissapeared but it doesn't work anyways

avatar
Patas Locas

@gabriel Hi, I had the same problem. I did not modify the app.js file and just ran the command: npm update alpinejs.

Apparently it was with the Alpine version. If you still have problems with Livewire and the .js file, put this in your routes file:

Livewire::setUpdateRoute(function ($handle) { return Route::post('/your_project/public/livewire/update', $handle); });

Livewire::setScriptRoute(function ($handle) { return Route::get('/your_project/public/livewire/livewire.js', $handle); });

Greetings.

Like our articles?

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

Recent New Courses