Next.js项目构建时出现Terser Webpack错误求助

问题定位 #

先找到报错的chunk文件static/chunks/36443.1f4a0592caf86eec.js，用编辑器跳转到第1行454144列，查看附近的字符——通常是无效Unicode字符（比如错误的emoji、乱码）或转义字符格式错误（如\u后未跟有效四位十六进制数）。

解决方案 #

• 检查业务代码中的特殊字符
  搜索项目近期新增的内容，重点排查包含特殊符号的组件文本、注释、字符串常量：

  • 替换无效Unicode字符为合法字符（比如把乱码的emoji换成标准表情）
  • 修正错误的转义写法，确保\u开头的转义符后是四位有效十六进制数

• 调整Terser配置
  在next.config.js中修改Terser的优化规则，避免处理无效Unicode：

  module.exports = {
    webpack: (config) => {
      config.optimization.minimizer.forEach(minimizer => {
        if (minimizer.constructor.name === 'TerserPlugin') {
          minimizer.options.terserOptions = {
            ...minimizer.options.terserOptions,
            compress: {
              ...minimizer.options.terserOptions?.compress,
              unicode: false // 禁用Unicode压缩逻辑
            }
          }
        }
      })
      return config
    }
  }
  

  也可以直接跳过有问题的chunk文件（仅临时应急用）：

  // 在上述配置的terserOptions中添加
  exclude: /36443\.1f4a0592caf86eec\.js$/
  

• 排查第三方依赖
  近期新增的依赖可能包含无效字符，用npm ls查看依赖树，逐个测试可疑包：

  • 尝试降级该依赖到稳定版本
  • 替换为功能类似的其他包

• 清理完整构建缓存
  除了node_modules，还要清理Next.js的构建缓存：

  rm -rf .next
  npm run build
  

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