升级Node.js 16后遇模块解析错误：Unexpected token (40:35)

问题分析 #

错误代码里的args[0]?.constructor用到了可选链操作符（?.），这是ES2020的语法。你的webpack配置默认未对node_modules/lib0下的代码做语法转译或解析，导致无法识别该语法，抛出模块解析失败的错误。

解决方案 #

方案1：让babel-loader处理lib0模块 #

修改webpack配置，调整babel-loader规则，让它覆盖lib0模块（默认babel-loader仅处理项目源码，不会处理node_modules内的文件）：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules目录，但lib0文件夹除外
        exclude: /node_modules(?!\/lib0)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: { node: '16' } }]],
            plugins: ['@babel/plugin-proposal-optional-chaining']
          }
        }
      }
    ]
  }
};

如果项目已有babel配置文件（如babel.config.json），确保文件内包含@babel/preset-env或@babel/plugin-proposal-optional-chaining插件。

方案2：升级到Webpack 5 #

Webpack 5默认支持解析ES2020及更高版本的语法（包括可选链），无需额外配置loader处理这类语法。若你的webpack版本低于5，直接升级至最新稳定版即可解决问题。

方案3：检查babel的targets配置 #

如果使用@babel/preset-env，确保配置的targets包含当前运行环境（Node.js 16），babel会根据目标环境自动判断是否需要转译语法：

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "16"
      }
    }]
  ]
}

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