React项目启动报错：找不到@babel/plugin-syntax-class-static-block模块

启动项目时出现如下报错：

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module '@babel/plugin-syntax-class-static-block'
Require stack:
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\@babel\preset-env\lib\available-plugins.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\@babel\preset-env\lib\filter-items.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\@babel\preset-env\lib\index.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\workbox-build\build\lib\bundle.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\workbox-webpack-plugin\build\generate-sw.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\workbox-webpack-plugin\build\index.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\react-scripts\config\webpack.config.js
- E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\react-scripts\scripts\start.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (E:\Jeet\Projects\Job Recommender\CodeStorm\Job Recommender Front End\job-recommender\node_modules\@babel\preset-env\lib\available-plugins.js:9:37)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\@babel\\preset-env\\lib\\available-plugins.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\@babel\\preset-env\\lib\\filter-items.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\@babel\\preset-env\\lib\\index.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\workbox-build\\build\\lib\\bundle.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\workbox-webpack-plugin\\build\\generate-sw.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\workbox-webpack-plugin\\build\\index.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\react-scripts\\config\\webpack.config.js',
    'E:\\Jeet\\Projects\\Job Recommender\\CodeStorm\\Job Recommender Front End\\job-recommender\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}

项目的package.json配置：

{
  "name": "job-recommender",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-syntax-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.22.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "tailwindcss": "^3.3.2"
  }
}

已尝试执行npm install --save-dev @babel/plugin-proposal-private-property-in-object，但错误未解决。

错误原因 #

你手动安装的@babel/preset-env@7.22.5版本，与react-scripts@5.0.1内置的Babel版本不兼容。新版@babel/preset-env依赖@babel/plugin-syntax-class-static-block插件，但react-scripts自带的Babel生态中并未包含该插件，导致启动时触发模块缺失错误。你之前安装的插件与当前缺失的模块无关，所以无法解决问题。

解决方案 #

方案一：移除手动Babel依赖，使用react-scripts内置配置（推荐） #

create-react-app的react-scripts已经内置了完整且适配的Babel配置，手动安装高版本Babel包会打破依赖平衡。执行以下步骤：

1. 卸载手动安装的Babel相关包：

npm uninstall @babel/preset-env @babel/plugin-syntax-class-properties

2. 删除依赖目录和锁定文件：

rm -rf node_modules package-lock.json
# 如果使用yarn，执行 rm -rf node_modules yarn.lock

3. 重新安装依赖：

npm install

4. 启动项目：

npm start

方案二：安装缺失的插件（不推荐，可能引发后续兼容问题） #

如果必须保留手动的Babel配置，可以直接安装缺失的插件：

npm install --save-dev @babel/plugin-syntax-class-static-block

但这种方式可能导致后续出现更多Babel版本不匹配的问题，因此优先推荐方案一。

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