React项目构建失败报错，开发服务运行正常求解决

问题描述 #

执行react-scripts build构建生产环境时失败，开发服务器可正常运行，报错包含两个核心问题：

创建优化的生产构建中... 你的依赖babel-preset-react-app正在导入@babel/plugin-proposal-private-property-in-object包，但未在其依赖中声明。目前能运行是因为该包已存在于node_modules中，但随时可能崩溃。
babel-preset-react-app属于已停止维护的create-react-app项目，该bug大概率不会被修复，建议将@babel/plugin-proposal-private-property-in-object添加到devDependencies中以规避此问题。
导入错误：'React' 无法从'react'中导出（导入为'React'）

已尝试删除node_modules并重新执行npm install，问题未解决。当前项目的package.json如下：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource/roboto": "^5.0.8",
    "@mui/icons-material": "^5.15.14",
    "@mui/material": "^5.15.14",
    "@mui/styled-engine-sc": "^6.0.0-alpha.8",
    "@mui/x-data-grid": "^6.18.6",
    "@rjsf/core": "^5.18.1",
    "@rjsf/mui": "^5.15.1",
    "@rjsf/utils": "^5.18.1",
    "@rjsf/validator-ajv6": "^5.18.1",
    "@rjsf/validator-ajv8": "^5.15.1",
    "@stripe/react-stripe-js": "^2.5.1",
    "@stripe/stripe-js": "^3.0.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.12",
    "react-router-dom": "^6.20.1",
    "react-router-guards": "^1.0.2",
    "react-scripts": "5.0.1",
    "react-toastify": "^10.0.4",
    "styled-components": "^6.1.1",
    "util": "^0.12.5",
    "uuid": "^9.0.1",
    "uuidv4": "^6.2.13",
    "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"
    ]
  }
}

解决方案 #

1. 安装缺失的Babel插件 #

根据报错提示，手动安装@babel/plugin-proposal-private-property-in-object到开发依赖：

npm install --save-dev @babel/plugin-proposal-private-property-in-object

安装完成后，package.json会新增（或更新）devDependencies字段：

{
  // ... 原有内容
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0"
  }
}

2. 修复'React'导出错误 #

这个错误通常来自两种情况，对应解决方式如下：

• 错误导入语法：检查项目所有文件，是否存在import { React } from 'react'的写法（使用大括号）。正确写法应为import React from 'react'（默认导入，无大括号），或者在React 17+版本中直接省略该导入（JSX自动导入已默认启用）。
• 依赖冲突：部分旧版第三方库可能不兼容React 18的导出逻辑。可以：
  • 检查@rjsf系列、react-router-guards等依赖的版本，升级到支持React 18的最新版；
  • 执行npm ls react查看是否存在多版本React，若有则运行npm dedupe合并依赖。

3. 重新构建 #

完成上述操作后，清理缓存并重新执行构建：

rm -rf node_modules/.cache
npm run build

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