模块解析失败：Unexpected token(24:23)错误及Webpack配置求助

错误核心信息 #

构建时触发以下错误：

Module parse failed: Unexpected token (24:23)

报错代码行：

super(explanation ?? msg);

??是空值合并运算符，属于ES2020语法，当前Webpack的loader链无法处理该高版本ES语法。

问题原因 #

1. Webpack配置中，babel-loader排除了所有node_modules目录，但报错文件来自node_modules中的某依赖（非@metamask），未被转译。
2. 仅给@metamask目录配置了esbuild-loader，但target设为es2015，不支持ES2020的空值合并运算符。
3. @babel/preset-env未配置明确的targets，默认转译规则未覆盖ES2020语法降级需求。

解决办法 #

方案1：指定需要转译的依赖包 #

找到报错的具体依赖包，修改babel-loader规则，不对该包进行排除：

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)(?![\\/]你的报错依赖包名)/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"]
    }
  }
}

方案2：升级esbuild-loader的目标语法版本 #

若报错文件属于@metamask依赖，修改其loader的target为支持ES2020的版本：

{
  test: /node_modules[\\/]@metamask/,
  use: {
    loader: "esbuild-loader",
    options: {
      loader: "jsx", 
      target: "es2020" // 也可设为更高版本如es2022、chrome90等
    }
  }
}

方案3：完善babel preset-env配置 #

给@babel/preset-env添加明确的目标环境，确保语法转译到位：

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [
        ["@babel/preset-env", {
          "targets": {
            "chrome": "90",
            "ie": "11" // 根据项目实际目标环境调整
          },
          "useBuiltIns": "usage",
          "corejs": 3
        }]
      ]
    }
  }
}

方案4：全局处理node_modules中的高版本ES语法 #

若多个node_modules依赖都使用了高版本ES语法，可添加全局处理规则（注意会增加构建时间）：

{
  test: /\.m?js$/,
  include: /node_modules/,
  use: {
    loader: "esbuild-loader",
    options: {
      loader: "js",
      target: "es2020"
    }
  }
}

验证步骤 #

1. 删除node_modules和package-lock.json（或yarn.lock）
2. 重新安装依赖：npm install
3. 重新执行构建：npm run build

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