React应用报错：experimental syntax 'optionalChainingAssign'未启用求解决

错误原因 #

你使用了可选链赋值（如obj?.property = value）这种ECMAScript实验性语法，但当前Babel配置未启用对该语法的支持。同时项目中自定义的.babelrc可能覆盖了react-scripts 5.0.1的默认Babel配置，导致缺失必要的转译插件。

解决方案 #

方案1：无需eject，用react-app-rewired扩展配置 #

1. 安装依赖：

npm install --save-dev react-app-rewired customize-cra @babel/plugin-proposal-optional-chaining-assign

2. 在项目根目录新建config-overrides.js文件，写入：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('@babel/plugin-proposal-optional-chaining-assign')
);

3. 修改package.json中的scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build && build-script.bat",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

方案2：修改Babel配置（适用于已eject或允许自定义.babelrc的场景） #

1. 安装必要插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining-assign

2. 更新你的.babelrc配置，添加插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-optional-chaining-assign"]
}

方案3：移除实验性语法（快速临时解决） #

如果代码中是误写了可选链赋值，直接替换为常规的条件赋值即可：

// 原错误写法
obj?.prop = 123;

// 替换为
if (obj) {
  obj.prop = 123;
}

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