报错原因
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 相关的错误。
解决