Laravel Inertia Breeze React项目从Vite迁Mix后编译失败求助

问题根源 #

错误提示明确指出找不到resources/js/app.js，但你的实际入口文件是app.jsx，同时webpack的扩展名解析逻辑存在匹配问题。

修复步骤 #

1. 修正入口文件路径 #

修改webpack.mix.js中的JS入口，将app.js改为实际的app.jsx：

const mix = require('laravel-mix');

mix
.setPublicPath('public')
.react()
.version()
.disableNotifications()
.js('resources/js/app.jsx', 'public/js') // 替换为实际的app.jsx文件
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]); 

// 移除重复的version()调用，mix.version()已默认在生产环境生效

2. （可选）显式配置扩展名解析 #

如果修改入口后仍有问题，可手动添加webpack扩展名规则，确保JSX文件被正确识别：

const mix = require('laravel-mix');

mix
.setPublicPath('public')
.react()
.version()
.disableNotifications()
.js('resources/js/app.jsx', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig({
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
});

3. 清理缓存并重新编译 #

执行以下命令清理缓存后重启开发服务：

rm -rf node_modules/.cache
npm run dev

额外说明 #

• mix.react()已内置JSX文件处理配置，但明确指定入口文件名是最直接的修复方式。
• 重复调用version()属于冗余操作，Laravel Mix会自动在生产环境生成版本化资源。

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