升级antd@5.20.0启动报错，请求技术支持

问题详情 #

近期升级antd至5.20.0版本，通过命令npm i antd --save --legacy-peer-deps完成安装且无异常，但执行npm start时控制台出现如下报错：

ERROR in ./node_modules/@ant-design/fast-color/lib/FastColor.js 56:10
Module parse failed: Unexpected token (56:10)
You may need an appropriate loader to handle this file type.
|    * All FastColor objects are valid. So isValid is always true. This property is kept to be compatible with TinyColor.
|    */
>   isValid = true;
|
|   /**
 @ ./node_modules/@ant-design/fast-color/lib/index.js 6:17-39
 @ ./node_modules/@rc-component/color-picker/lib/color.js
 @ ./node_modules/@rc-component/color-picker/lib/index.js
 @ ./node_modules/antd/lib/color-picker/util.js
 @ ./node_modules/antd/lib/color-picker/ColorPicker.js
 @ ./node_modules/antd/lib/color-picker/index.js
 @ ./node_modules/antd/lib/index.js
 @ ./app/containers/AdminLitePortal/components/CrisisManagementPortalV2/IncidentDetailsV2/IncidentDetailsV2.tsx
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js

已尝试清理npm缓存、删除node_modules后重装依赖、卸载antd后重新安装，均未解决问题。

其他用户反馈及解决方案 #

已有多位用户遇到相同问题，核心原因是@ant-design/fast-color包使用了类字段语法（public class fields），但当前项目的webpack/babel配置未对该包进行转译，导致无法解析该语法。可尝试以下解决方案：

方案1：修改webpack配置，让babel转译目标包 #

如果项目基于Create React App（CRA），需借助react-app-rewired或craco修改默认配置：

1. 安装依赖：npm i react-app-rewired --save-dev
2. 在项目根目录创建config-overrides.js，添加如下内容：

   module.exports = function override(config) {
     // 找到处理JS/TS的规则，添加@ant-design/fast-color到转译列表
     config.module.rules.forEach(rule => {
       if (rule.oneOf) {
         rule.oneOf.forEach(oneOfRule => {
           if (oneOfRule.test && oneOfRule.test.test('.js')) {
             oneOfRule.include = [
               ...(oneOfRule.include || []),
               /node_modules\/@ant-design\/fast-color/
             ];
           }
         });
       }
     });
     return config;
   };
   

3. 修改package.json中的启动命令：将"start": "react-scripts start"改为"start": "react-app-rewired start"

方案2：临时降级antd版本 #

若不想修改配置，可临时降级antd到5.19.x版本，避开该问题：

npm i antd@5.19.5 --save --legacy-peer-deps

方案3：检查babel插件配置 #

如果项目自定义了babel配置，确保已安装并启用@babel/plugin-proposal-class-fields插件：

1. 安装插件：npm i @babel/plugin-proposal-class-fields --save-dev
2. 在.babelrc或babel.config.js中添加：

   {
     "plugins": ["@babel/plugin-proposal-class-fields"]
   }
   

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