Fork Uniswap后启动报错：@react-spring/web需额外Babel Loader处理

问题原因 #

编译失败是因为@react-spring/web使用了公共类字段语法（即_value = null;这类类内直接赋值的写法），而当前项目的react-scripts版本自带的Babel配置未启用该语法支持，导致babel-loader无法解析。这是执行yarn upgrade升级依赖后，@react-spring/web版本更新引发的兼容性问题。

解决方案 #

方案1：降级@react-spring/web到兼容版本 #

找到适配当前react-scripts的稳定版本，执行：

yarn add @react-spring/web@9.7.3

（9.7.3为已知兼容旧版react-scripts的版本，可根据实际测试调整）

方案2：修改Babel配置（需eject或使用自定义工具） #

• 若项目已执行eject：
  1. 在项目根目录的package.json中添加Babel插件配置：

     {
       "babel": {
         "presets": ["react-app"],
         "plugins": ["@babel/plugin-proposal-class-properties"]
       }
     }
     

  2. 安装所需插件：

     yarn add @babel/plugin-proposal-class-properties --dev
     

• 若项目未eject：
  1. 安装依赖工具：

     yarn add react-app-rewired customize-cra @babel/plugin-proposal-class-properties --dev
     

  2. 在项目根目录创建config-overrides.js文件：

     const { override, addBabelPlugin } = require('customize-cra');
     module.exports = override(
       addBabelPlugin('@babel/plugin-proposal-class-properties')
     );
     

  3. 修改package.json中的启动脚本：

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

方案3：升级react-scripts到最新版本 #

若项目允许升级依赖，直接更新react-scripts：

yarn upgrade react-scripts@latest

之后重新安装依赖并启动：

yarn install
yarn start

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