React 18 的 create-react-app 依赖版本问题

Question

npx create-react-app my-project 导致以下依赖性错误：

npx版本：8.5.0

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^12.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

该命令仍然会生成一个项目目录，但是运行 npm start 在创建的目录中出现 node-modules 中缺少 web-vitals 的错误。

尝试过的解决方案

运行与上述错误消息建议的 --force 或 --legacy-peer-deps 相同的命令不能解决问题。
删除node_modules和package-lock.json和运行npm i也没有解决问题。

更新

问题已通过 create-react-app 的最新更新修复。现在它创建一个项目没有任何问题。

Answer 1

在暂时解决此问题之前，您可以删除 node_modules 文件夹和 package-lock.json。接下来，打开package.json并更改
"react": "^18.0.0" & "react-dom": "^18.0.0" 到早期版本，例如：
"react": "^17.0.2" & "react-dom": "^17.0.2".
最后，你可以运行 npm install.

备选方案（先试试这个！）：
joooni1998 建议的解决方案):

同时删除 node_modules 和 package-lock.json
运行 npm i web-vitals --save-dev
运行 npm install

然后您可以再次使用 npm run build 和 npm start

Answer 2

尝试运行 --force 或 --legacy-peer-deps，两者都可以毫无问题地安装依赖项。

如果这不起作用，则删除节点模块文件夹并从头开始安装

Answer 3

检查here for the Github issue。

这是一个临时解决方法：

安装 cra-template 到单独的文件夹（而不是您的新文件夹项目应用程序的文件夹）使用“npm install cra-template”
转到安装的 cra-template 包文件夹并在文件“template.json”中更改行“@testing-library/react”：“^12.0.0” ' 到 '"@testing-library/react": "^13.0.0"'
回到你的根目录然后运行 npx create-react-app my-app (你的应用名称) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE

此外，您可以让构建失败，删除 node_modules 文件夹以及 package-json.lock 文件。打开 package.json 文件并将 react 和 react-dom 更改为早期版本。

例如：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },
  "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"
    ]
  }
}

删除reportWebVitals.js 从 index.js 中删除 import reportWebVitals from './reportWebVitals'; 从 index.js

的底部删除 reportWebVitals();

最后运行 npm 安装

Answer 4

它通过删除 'node_modules' 文件夹和 'package-lock.json' 文件对我有用。然后，我按照 Gavriel 的回答的建议，将 package.json 文件中的 react 和 react-dom 版本都更改为 17.0.2 而不是 18.0.0。然后，在应用程序文件夹中，我运行

    npm i web-vitals --save-dev

然后

    npm start

应用启动成功

Answer 5

或者您可以尝试此 npx --legacy-peer-deps create-react-app my-appname 或转到 index.js 并删除对 web vitals 的使用

或使用 npm install -g npm@8.3.0 降级 npm 并创建 React 应用程序。

Answer 6

您可以改用 yarn add create-react-app your-app

React 18 的 create-react-app 依赖版本问题

create-react-app dependency version issues with React 18

npm

create-react-app

dependency-tree

react-18

尝试过的解决方案

更新