React项目引入AWS JS SDK后编译失败问题求助

问题重现 #

执行yarn add @aws-sdk/client-secrets-manager安装AWS Secrets Manager客户端后，启动React应用出现编译错误：

Failed to Compile 

./node_modules/@smithy/util-retry/dist-es/AdaptiveRetryStrategy.js 10:17
Module parse failed: Unexpected token (10:17)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     const {
|       rateLimiter
>     } = options ?? {};
|     this.rateLimiter = rateLimiter ?? new DefaultRateLimiter();
|     this.standardRetryStrategy = new StandardRetryStrategy(maxAttemptsProvider);

错误根源是AWS SDK v3依赖的@smithy库使用了ES2020的空值合并运算符（??），而默认情况下React的Babel配置不会编译node_modules目录下的代码，导致无法解析该语法。

解决方案 #

方案1：让Babel编译AWS相关依赖 #

修改项目根目录的babel.config.js（若使用.babelrc则修改对应文件），添加对AWS SDK及@smithy库的编译规则：

module.exports = {
  presets: ['react-app'],
  overrides: [
    {
      test: /\.js$/,
      include: [
        /node_modules\/@aws-sdk/,
        /node_modules\/@smithy/
      ],
      plugins: [
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  ]
};

如果尚未安装上述Babel插件，先执行安装命令：

yarn add @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining --dev

方案2：升级React Scripts版本 #

若你的项目使用旧版react-scripts，升级到最新版本可默认支持ES2020+语法：

yarn upgrade react-scripts --latest

注意：升级前建议备份项目代码，避免版本兼容问题。

方案3：使用UMD版本的AWS SDK #

无需修改配置，直接通过CDN引入UMD构建版本到public/index.html：

<script src="https://sdk.amazonaws.com/js/aws-sdk-3.x.min.js"></script>

之后在代码中通过全局AWS对象调用客户端：

const { SecretsManagerClient, GetSecretValueCommand } = AWS.SecretsManager;

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