Laravel 8项目经Mix压缩JS后出现`t is undefined`报错排查求助

我正在开发一个基于Laravel 8、Jetstream、Inertia.js和Vue3的项目，本地用npm run dev或npm run watch运行时一切正常，但部署到生产环境执行npm run prod后，控制台出现错误：t is undefined。该错误不会在登录页出现，跳转至其他页面时必然触发。由于压缩后的文件中t出现两万余次，难以定位错误来源，求可行的排查方法。

项目配置信息 #

package.json #

{
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.0",
        "@tailwindcss/typography": "^0.5.2",
        "@vue/compiler-sfc": "^3.2.31",
        "axios": "^0.19",
        "browser-sync": "^2.27.11",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.25",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "^3.0.0",
        "vue": "^3.2.31",
        "vue-loader": "^17.0.0"
    },
    "dependencies": {
        "jquery": "^3.6.0",
        "sugar": "^2.0.6"
    }
}

webpack.mix.js #

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

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .alias({
        '@': 'resources/js',
    });

mix.browserSync();

if (mix.inProduction()) {
    mix.version();
}

• 生成带SourceMap的生产构建：修改webpack.mix.js，在生产环境配置中添加SourceMap支持，这样浏览器控制台能直接定位到未压缩的源码位置。修改后代码如下：

  if (mix.inProduction()) {
      mix.version().sourceMaps();
  }
  

  重新执行npm run prod构建并部署，打开浏览器开发者工具查看错误栈，就能直接看到报错的源文件和行号。

• 逐步排查依赖与组件：由于登录页正常、其他页面报错，说明问题出在非登录页的依赖或组件中。可以尝试：

  • 暂时注释掉sugar、jquery这类全局依赖，重新构建看错误是否消失；
  • 在出问题的页面中逐步注释非核心组件，定位到具体引发错误的模块。

• 检查Inertia.js数据传递：跳转页面时Inertia会传递props，可能生产环境下某个页面的props缺失必填字段，开发环境的容错机制未暴露问题。可以在app.js中全局监听页面加载事件，打印props对比开发与生产环境的差异：

  import { Inertia } from '@inertiajs/inertia';
  Inertia.on('page', (page) => {
      console.log(page.props);
  });
  

• 校验Vue组件语法：Vue3在开发环境有语法容错，但压缩后可能触发隐性错误。重点检查出问题页面的组件：

  • 确认v-for循环中未处理空值的情况；
  • 检查组件props是否设置了合理的默认值；
  • 排查是否存在未定义的变量或异步数据未正确处理的场景。

• 尝试降级Laravel Mix版本：当前使用的Laravel Mix 6.0.25可能与部分依赖存在兼容问题，尝试降级到6.0.16等稳定版本，重新构建后验证错误是否解决。

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