修复npm audit后Webpack构建出现Terser Unexpected token错误

清理npm audit的错误后，执行npm run build命令构建时出现Terser语法错误，错误信息如下：

ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
    at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
    at c (/node_modules/terser/dist/bundle.min.js:1:28298)
    at l (/node_modules/terser/dist/bundle.min.js:1:28389)
    at f (/node_modules/terser/dist/bundle.min.js:1:28442)
    at /node_modules/terser/dist/bundle.min.js:1:38167
    at x (/node_modules/terser/dist/bundle.min.js:1:38198)
    at O (/node_modules/terser/dist/bundle.min.js:1:34874)
    at U (/node_modules/terser/dist/bundle.min.js:1:42405)
    at me (/node_modules/terser/dist/bundle.min.js:1:48326)
    at /terser/dist/bundle.min.js:1:49206

相关配置文件 #

package.json #

{
...
 "scripts": {
    "build": "webpack --config webpack.config.js --env production",
  },

  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@types/jquery": "^3.5.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "prettier": "2.8.1",
    "sass": "1.32",
    "sass-loader": "^9.0.2",
    "scss-loader": "0.0.1",
    "terser-webpack-plugin": "^3.0.6",
    "ts-loader": "^8.0.18",
    "typescript": "^4.2.3",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.0.8"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "@types/bootstrap": "^5.0.12",
    "@types/googlemaps": "^3.43.3",
    "@types/iframe-resizer": "^3.5.9",
    "@types/js-cookie": "^3.0.0",
    "@types/requirejs": "^2.1.32",
    "autoprefixer": "^9.8.5",
    "bootstrap": "^4.0.0",
    "filemanager-webpack-plugin": "^8.0.0",
    "fork-ts-checker-webpack-plugin": "^6.2.0",
    "highcharts": "^9.3.3",
    "highlight.js": "^10.1.1",
    "iframe-resizer": "^3.5.5",
    "jquery": "^3.5.1",
    "jquery-quicksand": "^1.6.0",
    "js-cookie": "^3.0.1",
    "loader-utils": "^2.0.3",
    "parsleyjs": "^2.9.2",
    "popper.js": "^1.0.8",
    "postcss-loader": "^3.0.0",
    "query-string": "^7.0.1",
    "select2": "^4.0.13",
    "slick-carousel": "^1.8.1",
    "source-map-loader": "^2.0.1",
    "swiper": "^6.5.3 <6.8",
    "tippy.js": "^6.2.6",
    "webpack": "^5.30.0"
  },
  "overrides": {
    "got": "12.1.0",
    "semver-regex@<3.1.4": "3.1.4",
    "semver-regex@>=4.0.0 <4.0.3": "4.0.3",
    "trim-newlines": "4.0.1",
    "minimist": "1.2.6",
    "terser@<4.8.1": "4.8.1",
    "terser@>=5.0.0 <5.14.2": "5.14.2",
    "nth-check": "2.0.1",
    "minimatch": "3.0.5"
  }
}

webpack.config.prod.js #

const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: false,
        terserOptions: {
          ecma: 5, // IE11
          compress: true,
          output: {
            comments: false,
            beautify: false
          }
        }
      })
    ]
  },

  module: {
    rules: [{

      test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
      use: info => {
        const theme = path.basename(info.issuer, path.extname(info.issuer));
        return [{
            loader: "file-loader",
            options: {
              outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
              name: "[name].[ext]",
              publicPath: '../images'
            },
          },
        ]
      }
    }]
  }
};

已尝试的无效方案 #

• 排查Terser插件相关社区issue，未找到有效解决方法
• 将Webpack从5.30.0升级到5.75版本，问题依旧
• 添加mode: web配置，无改善
• 确认未使用uglify或html-minifier，排除相关影响

1. 修复自定义代码的语法兼容性 #

错误指向select2.countSelectionAdapter.js第18行，先检查该文件是否使用了ES6+语法（如箭头函数、可选链?.、空值合并??等），当前Terser配置指定ecma:5，无法识别这类语法：

• 将文件中的ES6+语法修改为ES5兼容写法；
• 或在Webpack配置中添加Babel规则，转译该目录下的自定义JS文件。

2. 调整TerserPlugin的ECMA版本 #

如果无需兼容IE11，可将Terser的ecma版本从5调整为支持ES6+的版本（如2015）：

new TerserPlugin({
  parallel: false,
  terserOptions: {
    ecma: 2015,
    compress: true,
    output: {
      comments: false,
      beautify: false
    }
  }
})

3. 解决依赖版本冲突 #

package.json的overrides中强制升级了terser到5.14.2，但当前使用的terser-webpack-plugin@3.0.6与terser@5.x版本存在兼容性问题：

• 升级terser-webpack-plugin到适配terser@5的版本（如^5.3.0及以上）；
• 或调整overrides中的terser版本，使其与插件版本兼容。

4. 排除source-map-loader对自定义JS的处理 #

错误路径显示source-map-loader处理了自定义JS文件，可能导致源码解析异常。在Webpack配置中修改source-map-loader规则，只处理node_modules中的文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
        exclude: /frontend\/js\/shared/ // 排除自定义代码目录
      }
    ]
  }
}

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