未捕获的引用错误：Alpine 未定义

Question

将 Alpine 与 Laravel Vite 结合使用无法按预期工作。我收到错误：Uncaught ReferenceError：Alpine 未定义

我的app.js文件：

import Alpine from 'alpinejs';

Alpine.start();

window.Alpine = Alpine; // this should make Alpine globally accessible, right?

在头部包含 app.js 文件：

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

然后，当尝试使用 Alpine 时，我在页面上放置了以下脚本：

<script type="text/javascript">
    document.addEventListener('alpine:init', () => {
        console.log('alpine loaded') // this works so the event listener is called
        console.log(Alpine) // Uncaught ReferenceError: Alpine is not defined
    });
</script>

打开开发者控制台并输入

Alpine

时，该对象确实存在。关于为什么 Alpine 在全球范围内不可用的任何想法？

Answer 1

你应该这样做。

从 'alpinejs' 导入 Alpine；

window.Alpine = Alpine;

Alpine.start();

然后在刀片文件的标题中添加 @vite('resources/js/app.js') 。

Answer 2

您如何订购 vite 清单和导入 livewireStyles 可能是问题所在。因此，如果您使用的是 livewire 3 或以上的任何版本，alpine 会自动加载。在你的布局文件中 首先添加 vite 清单

@vite(['resources/js/app.js'])

并且在 app.js 中，您必然

DO NOT

需要这个...

// import Alpine from 'alpinejs';
// window.Alpine = Alpine;
// Alpine.start();

....因为这会导致错误

Alpine instance loaded twice.

不是一个大问题，但记住这一点是件好事。 投票后 然后你可以输入

@livewireStyles

这应该会删除 console.log 错误并全局导入 alpine。