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: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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

时会出现错误，

web-vitals

中缺少

node-modules

。

尝试过的解决方案

• 按照上述错误消息的建议使用

  --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）建议的解决方案：

1. 同时删除

   node_modules

   和

   package-lock.json

2. 奔跑

   npm i web-vitals --save-dev

3. 奔跑

   npm install

然后您可以再次使用

npm run build

和

npm start

Answer 2

在此处检查 Github 问题。

这是一个临时解决方法：

• 将 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 install

Answer 3

它通过删除“node_modules”文件夹和“package-lock.json”文件对我有用。然后，我按照 Gavriel 的答案https://stackoverflow.com/a/71836018/12490294的建议，将 package.json 文件中的 React 和 React-dom 版本更改为 17.0.2，而不是 18.0.0。然后，在应用程序文件夹中，我运行了

    npm i web-vitals --save-dev

然后

    npm start

应用程序启动成功

Answer 4

或者你可以尝试这个

npx --legacy-peer-deps create-react-app my-appname

或转到index.js并删除网络vitals的使用

或使用

npm install -g [email protected]

降级 npm 并创建 React 应用程序。

Answer 5

您可以使用

yarn add create-react-app your-app

代替

Answer 6

自从提出这个问题以来已经一年多了，尽管OP建议它已在新版本的

create-react-app

中得到修复，但它仍然没有得到解决。此外，在

package.json

中降级反应不起作用。在我的应用程序正常运行之前，我必须冒着风险并使用

--legacy-peer-deps

运行命令。

Answer 7

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

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