Livewire组件报错Laravel Echo cannot be found无法监听广播事件

问题修复方案 #

• 第一步：调整脚本加载顺序

你当前布局中@livewireScripts加载时机早于app.js，Livewire初始化时会立即检测全局是否存在window.Echo，此时app.js还未加载执行，自然抛出Echo不存在的错误。直接调整加载顺序即可：

@livewireStyles

<script src="{{ mix('js/app.js') }}"></script>
@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

• 第二步：确认app.js引入了bootstrap.js

打开resources/js/app.js文件，确认存在以下代码，保证Echo配置逻辑会被执行：

require('./bootstrap');

• 第三步：手动绑定Echo到Livewire实例（可选，解决极端时序问题）

如果调整顺序后仍有报错，可以在Echo初始化完成后手动绑定到Livewire实例，避免加载时序导致的检测失败，修改bootstrap.js代码如下：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

// 新增以下代码手动绑定
if (window.livewire) {
    window.livewire.echo = window.Echo;
}

• 第四步：重新编译前端资源

修改完JS代码后必须执行编译命令使修改生效：

• 开发环境执行：npm run dev
• 生产环境执行：npm run prod

完成以上操作后清除浏览器缓存重新测试即可，你现有Livewire组件的事件监听写法符合v2版本规范，不需要额外修改。

内容的提问来源于stack exchange，提问作者Орлов Владлен