升级NextJS 12至13后构建报错：Uncaught SyntaxError求助

先定位报错的原始代码 #

生产环境的打包文件是混淆压缩过的，直接看_app-f8abd0a73b0d3a9f.js:1038根本找不到问题。你可以这么做：

• 在next.config.js里加productionBrowserSourceMaps: true，重新构建部署，浏览器控制台就能显示对应的原始代码位置，而不是混淆后的代码。
• 或者本地跑next build && next start启动生产环境，在本地浏览器调试，这样更方便排查。

排查常见语法错误 #

这个Invalid left-hand side expression in postfix operation错误，90%以上是因为你把++或--后缀运算符用在了不能被赋值的表达式上，比如：

• 错误写法：(user.age + 1)++、getTotal()++、const num = 5; num++
• 重点检查_app.js/_app.tsx文件，以及所有在_app里引入的组件、工具函数，有没有这类写法。
• 为啥开发模式没问题？因为开发环境的Fast Refresh或者编译规则没那么严格，某些语法问题会被掩盖，生产打包时的压缩工具（比如Terser）会把代码优化后触发报错。

检查依赖兼容性 #

NextJS 13的打包链（Webpack 5、Terser这些）和12有不少差异，旧依赖可能不兼容：

• 翻一遍package.json里的依赖，尤其是那些操作DOM、自定义编译插件的包，比如旧版styled-components、react-query或者自定义Babel插件。
• 先把所有依赖更到兼容NextJS 13的版本，或者暂时移除可疑依赖，看报错是否消失。

核对NextJS配置 #

如果你还在用Pages Router（没切App Router），某些旧配置可能冲突：

• 检查next.config.js里有没有过时的配置项，比如Webpack的旧规则，可能和新打包流程打架。
• 要是用了Babel，看看.babelrc或babel.config.js，别用那些NextJS 13已经默认支持的插件，重复配置可能导致编译异常。

临时禁用压缩快速定位 #

要是还是找不到问题，先把生产环境的代码压缩关了：
在next.config.js里加这段：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization.minimize = false;
    }
    return config;
  },
};

重新构建后，打包后的代码没被混淆，直接看报错行的代码，一眼就能找到问题。

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