React导入@aws-sdk/client-s3时Firefox报正则分组错误如何解决

错误原因 #

该报错与导入路径中的@符号无关，本质是@aws-sdk/client-s3（AWS SDK v3）的内部代码使用了具名正则捕获组语法，而你当前使用的Firefox浏览器版本低于78，该版本是首个正式支持具名正则捕获组特性的Firefox版本，低版本浏览器解析到这段不兼容的语法时就会抛出对应错误。

解决方案 #

• 方案1：升级Firefox浏览器到78及以上正式版本，无需修改项目代码即可直接兼容该语法特性。
• 方案2：如果项目需要兼容低版本Firefox，将@aws-sdk相关依赖加入转译范围：
  • 若使用Create React App脚手架，可通过react-app-rewired + customize-cra修改默认Babel配置，将@aws-sdk目录加入Babel转译白名单，把高版本语法转译为低版本浏览器兼容的语法。
  • 若使用自定义Webpack配置，修改babel-loader的排除规则，不对@aws-sdk包做node_modules排除，示例配置如下：

    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules\/(?!@aws-sdk)/,
          loader: 'babel-loader'
        }
      ]
    }
    

• 方案3：降级使用AWS SDK v2版本，该版本未使用高版本正则语法，对低版本浏览器兼容性更好，对应的导入语句为：

  import S3 from 'aws-sdk/clients/s3'
  

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