Livewire 3 和 Laravel Breeze 错误：Alpine.js 冲突

发表于： 2023-12-27 2023-12-27
分类： Laravel

如果你尝试将 Livewire 3 与 Laravel Breeze 入门套件一起使用，你可能会注意到你的组件没有反应，Livewire 的一些功能就是不起作用。原因可能是 AlpineJS 被加载了两次。

在浏览器控制台中，您可能看到以下错误：

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 在 resources/js/app.js 文件中默认启用 Alpine.js

Livewire v3 已经内置了 AlpineJS 并已预先配置

您可以通过几个简单的步骤来修复它：

1）打开 resources/js/app.js
2）删除以下 3 行：
    import Alpine from 'alpinejs';
    window.Alpine = Alpine;
    Alpine.start();
3）运行 npm run build 重构资源文件
4）添加 @livewireStyles 和 @livewireScripts 到 resources/views/layouts/app.blade.php 中

就是这样！您已经禁用了 AlpineJS，并允许 Livewire 内置的 AlpineJS 完成其工作。

admin