使用Babel/Webpack无法解决aws-sdk v3可选链语法解析错误

问题重现 #

使用AWS SDK v3时Webpack打包报错，提示无法解析可选链运算符（?.）：

ERROR in ./node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js 10:30
Module parse failed: Unexpected token (10:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|         const canonicalHeaderName = headerName.toLowerCase();
|         if (canonicalHeaderName in ALWAYS_UNSIGNABLE_HEADERS ||
>             unsignableHeaders?.has(canonicalHeaderName) ||
|             PROXY_HEADER_PATTERN.test(canonicalHeaderName) ||
|             SEC_HEADER_PATTERN.test(canonicalHeaderName)) {
 @ ./node_modules/@aws-sdk/signature-v4/dist-es/index.js 2:0-60 2:0-60

当前环境：

• Node 14
• Webpack 4
• Babel 7（已配置@babel/plugin-proposal-optional-chaining插件）

问题根源 #

你的Webpack配置通过exclude: '/node_modules/'排除了所有第三方依赖的转译，导致@aws-sdk模块内的可选链语法未经过Babel处理。Webpack 4默认无法直接解析这类ES2020+语法，因此抛出解析错误。

解决方案 #

修改Webpack配置，让Babel处理@aws-sdk相关模块，具体步骤如下：

1. 调整Webpack的Loader规则 #

将原来的exclude: '/node_modules/'替换为**排除node_modules但例外@aws-sdk**的正则表达式，确保Babel转译AWS SDK的代码：

{
  test: /\.(js|jsx|es)$/,
  use: [
    'thread-loader',
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          '@babel/plugin-proposal-nullish-coalescing-operator',
          '@babel/plugin-proposal-optional-chaining'
        ],
        presets: ['@babel/preset-react', '@babel/preset-env']
      }
    }
  ],
  // 排除node_modules下除@aws-sdk以外的模块
  exclude: /node_modules\/(?!@aws-sdk)/,
}

2. 优化Babel配置（可选但推荐） #

在babel.config.js中明确指定目标环境为Node 14，让@babel/preset-env更精准地转译语法：

module.exports = function (api) {
  api.cache(true);

  const presets = [
    ['@babel/preset-env', {
      targets: { node: '14' },
      useBuiltIns: 'usage',
      corejs: 3
    }],
    '@babel/preset-react'
  ];
  const plugins = [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining'
  ];

  return {
    presets,
    plugins
  };
};

验证 #

重新运行Webpack打包命令，此时@aws-sdk模块内的可选链语法会被Babel转译为Node 14兼容的代码，解析错误即可消除。

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