Ошибка типа: невозможно переопределить свойство: $persist в Laravel 11 с Livewire 3 и AlpineJs 3
Я работаю над проектом, используя Laravel 11, Livewire 3 и AlpineJs 3. Я пытаюсь использовать плагин @alpinejs/persist для управления переключением темного режима. Однако я продолжаю сталкиваться со следующей ошибкой:
livewire.esm.js:4999
Uncaught
TypeError: Cannot redefine property: $persist
at Function.defineProperty (<anonymous>)
at src_default (livewire.esm.js:4999:14)
at livewire.esm.js:2766:32
at Array.forEach (<anonymous>)
at Object.plugin (livewire.esm.js:2766:17)
at Object.start (livewire.esm.js:9448:28)
at app.js:20:10
Вот моя установка:
приложение.js:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import persist from '@alpinejs/persist';
window.Alpine = Alpine;
console.info('Alpine.$persist adding it');
Alpine.plugin(persist);
/* Stores */
Alpine.store('darkMode', {
on: Alpine.$persist(true).as('darkMode_on'),
toggle() {
this.on = !this.on;
},
});
Livewire.start();
макеты/app.blade.php:
<!DOCTYPE html>
<html lang = "{{ str_replace('_', '-', app()->getLocale()) }}" x-data :class = "$store.darkMode.on && 'dark'">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<link rel = "stylesheet" href = "{{ asset('/css/bootstrap-icons.min.css') }}">
@livewireStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class = "">
<main class = "container mx-auto my-3">
{{ $slot }}
</main>
@livewireScriptConfig
</body>
</html>
Я ожидал, что плагин @alpinejs/persist будет работать без ошибок, что позволит мне переключать темный режим с помощью магазинов Alpine.js. Однако ошибка TypeError: Cannot redefine property: $persist предполагает, что плагин persist загружается или определяется более одного раза.
Вот шаги, которые я предпринял для устранения неполадок:
Проверено, что
@alpinejs/persistимпортируется и регистрируется вapp.jsтолько один раз.Очистил кэш браузера и попробовал в режиме инкогнито.
Убедился, что версии Alpine.js и
@alpinejs/persistсовместимы.
Несмотря на эти шаги, ошибка сохраняется. Я не уверен, почему это происходит и как это решить.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Livewire 3 уже включает в себя несколько распространенных плагинов AlpineJs, и persist — один из них.
Так можно удалить весь импорт и не нужно вручную запускать Livewire, можно оставить в магазине только инициализацию darkMode
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: Alpine.$persist(true).as('darkMode_on'),
toggle() {
this.on = !this.on;
},
});
});
Затем в вашем app.blade.php вы должны заменить @livewireScriptConfig на @livewireScripts.
Здесь есть информация об уже включенных плагинах