React18 Create React App报Missing class properties transform错误

Create React App 内置的Babel配置默认仅转译src目录下的业务代码，不会处理引入的外部库代码——不管是本地link的自研类库，还是放在src目录外的本地代码，都不会走项目的Babel转译流程。
安装babel-plugin-transform-class-properties不生效的核心原因是插件作用范围没有覆盖到自研库的RequestBody.js文件，和插件本身是否安装无关。
报错对应的语法是类计算属性名+类字段，属于ES2022标准语法，未经过转译时CRA内置的webpack构建链无法识别，就会抛出Missing class properties transform错误。

方案1：将自研库源码移入项目src目录 #

如果自研库不需要单独发版、仅当前项目复用，直接把库源码移到主项目src/目录下（比如src/lib/your-custom-lib），调整引入路径即可。CRA会自动对src下所有文件做全量语法转译，不需要额外安装Babel插件，类属性、计算属性名语法会被正常编译，改完直接重启构建进程就能生效。

方案2：提前在自研库侧完成语法转译（推荐独立维护的库使用） #

如果自研库是独立维护、需要给多个项目复用，不要直接向业务侧输出未编译的ESNext源码，在库自身的构建流程里完成语法降级：

• 库侧使用Babel构建时，不需要单独安装老旧的babel-plugin-transform-class-properties，直接配置@babel/preset-env即可内置类属性语法的转译能力，示例配置：

{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }]
  ]
}

• 主项目引入时，直接引用库dist目录下的构建产物，不要引用库源码目录的入口文件。

方案3：重写CRA构建配置，将外部库纳入Babel转译范围 #

如果不想移动源码、也不调整库的构建流程，可以修改CRA的webpack配置，让babel-loader处理你的自研库文件：

1. 安装Babel7对应版本的类属性转译插件（老版本的babel-plugin-transform-class-properties在Babel7环境下已废弃，无法生效）：

npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-property-in-object -D

2. 不想eject的话可以用react-app-rewired+customize-cra重写配置，在项目根目录的config-overrides.js中添加如下配置：

const { override, addBabelPlugins, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  addBabelPlugins(
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-property-in-object'
  ),
  babelInclude([
    path.resolve(__dirname, 'src'),
    // 替换为你本地自研库的绝对路径
    path.resolve(__dirname, '../your-custom-lib-path')
  ])
);

3. 替换package.json里的scripts命令，把react-scripts start/build换成react-app-rewired start/build，重启构建进程即可。

• 不要直接在CRA项目根目录创建.babelrc文件，CRA默认会忽略src目录外的Babel配置，除非完全eject重构构建链，否则单独添加的Babel配置不会生效。
• 如果是通过npm link引入的本地库，先确认link的路径是库的构建产物目录还是源码目录，link到源码目录时和直接引入外部源码效果一致，不会被CRA转译。

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