升级launchdarkly-react-client-sdk 3.0.1后应用启动报错求助

这个问题我之前帮同行排查过，本质是新版LaunchDarkly SDK（3.x）使用了你的项目Babel配置不支持的ES2020+语法特性——具体就是报错里的可选链操作符?.，而旧版react-scripts的默认Babel预设没有包含这些语法的转换规则，导致webpack解析失败。

下面给你两种可行的解决思路：

方案1：升级react-scripts到最新版本（推荐） #

如果你的项目没有依赖旧版react-scripts的特殊配置，直接升级是最省心的办法，新版react-scripts（5.x及以上）已经默认支持ES2020+的语法：

• 先卸载旧版react-scripts：

  npm uninstall react-scripts
  

• 安装最新版本：

  npm install react-scripts@latest
  

• 重启你的开发服务器：

  npm start
  

方案2：不升级react-scripts，手动配置Babel支持新语法 #

如果因为项目限制无法升级react-scripts，可以通过手动添加Babel插件并修改webpack配置来解决：

1. 安装所需的Babel插件：

   npm install --save-dev @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
   

2. 安装react-app-rewired和customize-cra来修改默认webpack配置（因为旧版react-scripts默认不会转译node_modules里的包）：

   npm install --save-dev react-app-rewired customize-cra
   

3. 在项目根目录创建config-overrides.js文件，内容如下：

   const { override, addBabelPlugins, babelInclude } = require('customize-cra');
   const path = require('path');
   
   module.exports = override(
     // 添加支持可选链和空值合并的Babel插件
     addBabelPlugins(
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator'
     ),
     // 指定要转译的目录，包括LaunchDarkly的SDK包
     babelInclude([
       path.resolve(__dirname, 'src'),
       path.resolve(__dirname, 'node_modules/launchdarkly-js-client-sdk'),
       path.resolve(__dirname, 'node_modules/launchdarkly-react-client-sdk')
     ])
   );
   

4. 修改package.json里的scripts命令，替换成react-app-rewired：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

5. 最后重启开发服务器即可。

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