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

---

解决办法

这个错误是因为 React 版本不兼容导致的。让我们按步骤重新创建项目：

```plaintext
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
```

如果还遇到问题，可以尝试在 package.json 中指定具体的 React 版本：
完整步骤：固定 React 18.2.0 版本

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

```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}
```

然后运行：
```bash
npm install
npm start
```

记住要设置 Node 环境变量（如果使用新版本 Node.js）：
```bash
set SET NODE_OPTIONS=--openssl-legacy-provider
```

这样应该能够成功创建和运行 React 项目。

显示版本号已固定成功 成功解决React版本不兼容问题 

---

有个报错 让我们看看 

报错缺少 `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

这个错误是因为缺少 `web-vitals` 依赖。让我们修复它：
```plaintext
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
```
_________________________________________
如果还有问题，可以尝试：
```bash
# 单独安装 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
```
这样应该能解决 web-vitals 相关的错误。

解决