为什么SweetAlert2在Laravel项目的Livewire组件模板中无法正常调用？

报错原因 #

• app.js代码执行顺序错误：你在代码中先调用了Alpine.start()启动Alpine实例，之后才将Swal挂载到window对象上。Alpine启动后会立刻解析页面上的x-data、x-init指令并执行对应初始化方法，此时window.Swal还未完成赋值，因此读取为undefined。
• 脚本加载顺序冲突：Laravel默认引入编译后的app.js时会加defer属性，代表等DOM解析完成后再执行，如果你组件内的内联脚本没有做延迟执行处理，会早于app.js运行，也会导致window.Swal未定义。
• 未重新编译前端资源：修改app.js后没有执行npm编译命令，变更未生效。

修复方案 #

1. 调整app.js代码顺序 #

把所有全局对象挂载操作移到Alpine启动之前，修改resources/js/app.js代码如下：

require('./bootstrap');

import Alpine from 'alpinejs';
import Swal from 'sweetalert2';

// 先完成所有全局对象挂载
window.Alpine = Alpine;
window.Swal = Swal;

require('@fortawesome/fontawesome-free/js/all.min.js');

// 最后再启动Alpine
Alpine.start();

Swal.fire('Test!', 'Hello test message','success');

2. 重新编译前端资源 #

执行以下命令让app.js的修改生效：

# 开发环境
npm run dev

# 生产环境
npm run prod

3. 可选兼容方案（适配极端加载顺序场景） #

如果调整顺序后仍偶现问题，可以修改组件内的初始化逻辑，等待window.Swal挂载完成后再调用：

function adminFacilitiesComponent() {
    return {
        async onAdminFacilitiesComponentInit(component) {
            // 最多等待3秒，避免页面卡死
            let retry = 0;
            while (!window.Swal && retry < 30) {
                await new Promise(resolve => setTimeout(resolve, 100));
                retry++;
            }
            window.Swal?.fire('Hello world!');
        },
    }
}

4. 可选Livewire适配方案（更符合框架开发规范） #

如果需要配合后端操作触发弹窗，可以用Livewire的事件机制统一处理，避免在每个组件内单独调用Swal：

• 后端Livewire组件中触发事件：

$this->dispatchBrowserEvent('swal', [
    'title' => '操作成功',
    'icon' => 'success',
    'text' => 'Hello world!'
]);

• 在app.js中全局监听事件触发弹窗：

window.addEventListener('swal', e => {
    Swal.fire(e.detail);
});

内容的提问来源于stack exchange，提问作者Petro Gromovo