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.jsfile - 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 buildto build your assets again. - Step 4: Open
resources/views/layouts/app.blade.php - Step 5: Add
@livewireStylesand@livewireScriptslike 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.
Nice information, but wath if you don't use livewire on all your pages and then need Alpine?
I think that it is still available as it came from Livewire pre-bundled. That's why we had this issue
yes if you include @Livewirescripts on every page