Webpack 5处理可选链语法报错？升级TS项目遇模块解析问题求助

核心原因 #

你的babel-loader配置通过exclude: /node_modules/排除了所有第三方库的转译，但p-retry库源码使用了未转译的ES2020可选链语法（?.），Webpack 5仅负责打包，不处理ES新语法转译，因此导致解析失败。

解决方案 #

1. 修改babel-loader的排除规则，让其处理p-retry包 #

将原来的exclude: /node_modules/改为排除node_modules但例外处理p-retry，确保babel转译该库的代码：

test: /\.js$/,
exclude: /node_modules\/(?!p-retry)/, // 关键修改：不排除p-retry包
use: [
    {
        loader: 'babel-loader',
        options: {
            presets: [
                ["@babel/preset-env", {"modules": false, "useBuiltIns": "usage", "corejs": 3}],
            ],
            // 注：无需单独添加可选链插件，@babel/preset-env会根据目标环境自动引入对应插件
            cacheDirectory: true
        }
    }
]

2. （可选）明确@babel/preset-env的目标环境配置 #

如果项目需要兼容旧版浏览器，建议在@babel/preset-env中指定目标浏览器，确保转译覆盖到所需语法：

["@babel/preset-env", {
    "modules": false,
    "useBuiltIns": "usage",
    "corejs": 3,
    "targets": {
        "chrome": "60",
        "ie": "11"
        // 可根据实际需求调整，也可使用项目根目录的browserslist配置文件
    }
}]

3. 清理缓存并重新编译 #

修改配置后，清理Webpack缓存（如删除node_modules/.cache目录，或执行webpack --no-cache），再重新运行编译命令。

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