Опубликовано: среда, 13 сентября 2023 г. в 08:29

Ошибка Livewire 3 и Laravel Breeze: Конфликт Alpine.js

Источник: «Livewire 3 and Laravel Breeze Error: Alpine.js Conflict»

Если вы попытаетесь использовать Livewire 3 со стартовым набором Laravel Breeze, то можете заметить, что ваши компоненты не реагируют на реакцию, а некоторые функции Livewire просто не работают. Причиной может быть Alpine.js, который загружается дважды. Сейчас я покажу вам, как это исправить.

В консоли браузера вы могли увидеть следующую ошибку:

Uncaught TypeError: window.Alpine.cloneNode is not a function
  at Object.morph (livewire.js?id=3948ee27:7735:42)
  at morph2 (livewire.js?id=3948ee27:8294:20)
  at livewire.js?id=3948ee27:8365:7

Или любая другая ошибка подобного рода:

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
И многие другие!

Эта ошибка вызвана конфликтом Livewire и Breeze:

В Laravel Breeze по умолчанию включён Alpine.js в файле resources/js/app.js
Livewire v3 также поставляется со встроенным и предварительно настроенным Alpine

Но не волнуйтесь. Это можно исправить несколькими простыми действиями:

Решение

Шаг 1: Откройте файл resources/js/app.js
Шаг 2: Удалите следующие строки:

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Шаг 3: Запустите npm run build для повторной сборки ресурсов.
Шаг 4: Откройте файл resources/views/layouts/app.blade.php
Шаг 5: Добавьте @livewireStyles и @livewireScripts следующим образом:

 <!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>

Вот и все! Вы только что отключили Alpine от Breeze и позволили встроенному в Livewire Alpine выполнять свою работу.

Теперь у вас должен быть реактивный компонент, а в консоли больше нет ошибок.

Ошибка Livewire 3 и Laravel Breeze: Конфликт Alpine.js

Решение

Дополнительные материалы

Предыдущая Статья

Следующая Статья