React版本不兼容问题解决指南：从错误分析到完整解决方案

React版本不兼容问题解决指南：从错误分析到完整解决方案

引用

CSDN

1.

https://blog.csdn.net/TullyL/article/details/144300756

在React项目开发中，版本不兼容问题是一个常见的困扰。本文将详细介绍如何解决React版本不兼容导致的项目创建失败问题，包括具体的错误信息分析、解决方案步骤以及相关依赖的处理方法。

报错原因

React版本不兼容是导致项目创建失败的主要原因。在创建React应用时，如果不同组件或库之间的React版本不匹配，就会引发依赖解析错误。

详细报错

在尝试创建React项目时，开发者遇到了以下错误信息：

Microsoft Windows [版本 10.0.22000.2538Microsoft Windows [版本 10.0.22000.2538]
(c) Microsoft Corporation。保留所有权利。
E:\React\react-weather-app>mk weather-app
'mk' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
E:\React\react-weather-app>create-react-app weather-app
Creating a new React app in E:\React\react-weather-app\weather-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1314 packages in 1m
261 packages are looking for funding   
  run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: weather-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
otentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\admin\AppData\Local\npm-cache\_logs\2024-12-06T13_21_45_060Z-eresolve-report.txt     
npm error A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2024-12-06T13_21_45_060Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed  

解决办法

重新创建项目

1. 首先清理当前目录：

• 删除 weather-app 文件夹

2. 创建新项目（指定React版本）：

   npx create-react-app weather-app --template typescript --use-npm
   

3. 如果上面命令还是报错，可以先全局更新 create-react-app：

   npm uninstall -g create-react-app
   npm install -g create-react-app
   

4. 然后再创建项目：

   npx create-react-app weather-app
   

5. 进入项目目录：

   cd weather-app
   

6. 启动项目：

   npm start
   

固定React版本

如果上述方法仍然无法解决问题，可以尝试在 package.json 中指定具体的React版本：

1. 确保在正确目录：

   cd E:\React\react-weather-app\weather-app
   dir  # 确认有 package.json 文件
   

2. 备份 package.json（可选）：

   copy package.json package.json.bak
   

3. 修改 package.json：

   {
     "name": "weather-app",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "react": "18.2.0",        // 移除 ^ 符号
       "react-dom": "18.2.0",    // 移除 ^ 符号
       "react-scripts": "5.0.1"
     },
     // ... 其他配置保持不变
   }
   

4. 清理旧依赖：

• 删除 node_modules 文件夹
• 删除 package-lock.json 文件

5. 重新安装依赖：

   npm cache clean --force  # 清除 npm 缓存
   npm install             # 重新安装
   

6. 验证安装：

   npm list react         # 检查 React 版本
   npm list react-dom     # 检查 React DOM 版本
   

7. 启动项目：

   npm start
   

处理缺少 web-vitals 依赖

在项目启动时，如果遇到缺少 web-vitals 依赖的错误：

ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 'E:\React\react-weather-app\weather-app\src'
webpack compiled with 1 error

可以按照以下步骤解决：

1. 修改 package.json，添加缺失的依赖：

   {
     "name": "weather-app",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "react": "18.2.0",
       "react-dom": "18.2.0",
       "react-scripts": "5.0.1",
       "web-vitals": "^2.1.4",           // 添加这行
       "@testing-library/jest-dom": "^5.16.5",    // 添加这些测试相关的依赖
       "@testing-library/react": "^13.4.0",
       "@testing-library/user-event": "^13.5.0"
     },
     // ... 其他配置保持不变
   }
   

2. 重新安装依赖：

   npm install
   

3. 设置 Node 选项：

   set SET NODE_OPTIONS=--openssl-legacy-provider
   

4. 启动项目：

   npm start
   

如果还有问题，可以尝试单独安装 web-vitals：

npm install web-vitals@2.1.4

或者安装所有缺失的依赖：

npm install web-vitals@2.1.4 @testing-library/jest-dom@5.16.5 @testing-library/react@13.4.0 @testing-library/user-event@13.5.0

通过以上步骤，应该能够成功解决React版本不兼容问题，并顺利启动项目。