Laravel10升11+Livewire2升3后脚本语法错误求助

核心原因 #

Livewire 3 已废弃 @livewireScripts() 和 @livewireStyles() 指令，继续使用会输出无效的HTML内容，浏览器将其当作JS解析时触发Uncaught SyntaxError: expected expression, got '<'错误。

解决步骤 #

1. 移除布局文件中的旧指令
   直接删掉所有 @livewireScripts() 和 @livewireStyles() 代码行。

2. 配置Vite集成Livewire 3资源

   • 修改 resources/js/app.js，添加Livewire初始化代码：

     import './bootstrap';
     import Livewire from '@livewire/vite-plugin';
     
     Livewire.start();
     

   • 确保 vite.config.js 已引入Livewire插件：

     import { defineConfig } from 'vite';
     import laravel from 'laravel-vite-plugin';
     import livewire from '@livewire/vite-plugin';
     
     export default defineConfig({
         plugins: [
             laravel({
                 input: ['resources/css/app.css', 'resources/js/app.js'],
                 refresh: true,
             }),
             livewire(),
         ],
     });
     

3. 布局文件中正确引入Vite资源
   用Laravel官方的@vite指令替换旧的资源引入：

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

4. 清除缓存并重新构建资源
   执行以下命令：

   php artisan cache:clear
   php artisan view:clear
   npm run build
   

5. 验证组件渲染语法
   Livewire 3 组件渲染使用 <livewire:组件名 /> 或 @livewire('组件名')，确保没有使用Livewire 2的旧语法（比如@livewireComponent）。

6. 排查第三方依赖冲突
   检查项目中是否有与Livewire 3不兼容的第三方JS库或自定义脚本，暂时禁用非必要脚本测试是否恢复正常。

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