Laravel Mix编译app.js时Livewire.on方法失效报错问题

核心矛盾：导入的对象根本不是可调用的Livewire运行时实例 #

你之前尝试重新安装依赖、把逻辑包裹在文档加载完成回调里都没有解决问题，本质是问题根本不在依赖缺失、也不在脚本执行时序，而是app.js中导入的Livewire变量，从一开始就不是那个带有on方法的运行时实例。具体错误点有两个：

• 你通过import Livewire from '../../vendor/livewire/livewire/dist/livewire'导入的是Livewire的UMD格式源码文件，Laravel Mix基于Webpack的模块解析规则，会把这个文件当成普通ES模块处理，默认导出指向的是模块的内部包装结构，并非已经初始化完成、挂载了on()等运行方法的单例对象。
• 这种导入方式会把Livewire源码直接打包进app.js产物，和你页面通过@livewireScripts指令加载的、挂载在window.Livewire上的全局实例完全是两份隔离的代码。你本地导入的这份代码从未执行初始化流程，自然不存在on方法可供调用。

你在Blade的@push('scripts')中写的代码能正常运行，本质是因为这段脚本在@livewireScripts加载完成后执行，直接访问的是全局已经初始化好的window.Livewire实例，和app.js里导入的对象完全不是同一个东西。

根据你是否使用默认的Blade脚本加载模式，选择对应的方案即可：

场景1：使用默认@livewireScripts加载Livewire（绝大多数项目的用法） #

完全不需要在app.js中导入Livewire源码，直接引用全局挂载的实例即可，搭配Livewire自带的初始化完成事件避免时序问题：

// app.js 中直接编写，不要额外import Livewire源码
document.addEventListener('livewire:init', () => {
  // 这里访问的就是全局window上已经初始化好的Livewire实例
  Livewire.on('testEvent', () => {
    alert('test');
  });
});

注意：

• 一定要确保页面布局中已经写了@livewireScripts，不然全局根本不存在window.Livewire对象。
• livewire:init事件会在Livewire完全加载、所有组件初始化完成后触发，比包裹在DOMContentLoaded回调中更可靠，不会出现时序不匹配的问题。

场景2：想要把Livewire打包进自定义前端资源（不使用@livewireScripts指令） #

需要先通过npm安装官方的Livewire前端依赖包，再按正确流程导入、启动实例：

1. 先安装依赖：npm install livewire/livewire
2. 在app.js中按正确逻辑导入、初始化：

// 导入ES格式的Livewire入口
import Livewire from 'livewire/livewire/dist/livewire.esm';
// 必须执行start()方法，才会初始化生成带on()方法的运行时实例
Livewire.start();
// 初始化完成后再绑定事件
Livewire.on('testEvent', () => {
  alert('test');
});

注意：如果用了这种全量打包的方式，一定要删掉页面布局里的@livewireScripts指令，避免加载两份Livewire导致实例冲突、事件失效。

• 不要从vendor目录直接导入Livewire源码，vendor目录是PHP端的代码存放路径，前端依赖要通过npm安装后从node_modules引入，避免出现版本不匹配、路径失效的问题。
• 不要通过import * as Livewire from ...的方式导入，这种写法拿到的是整个模块的导出集合，不是初始化后的运行时实例，依然会报on is not a function的错误。
• 如果采用全量打包Livewire到自定义资源的方案，一定要记得执行Livewire.start()初始化，未初始化的实例上不会挂载事件监听等方法。
• 绝对不要同时启用两种Livewire加载方式（既在Blade里写@livewireScripts，又在app.js里手动导入并启动Livewire），两个独立运行的实例会导致事件完全无法匹配监听逻辑。

内容的提问来源于stack exchange，提问作者M. Lee