使用react 18创建react应用程序依赖版本问题

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，并且节点模块中缺少web vitals。

>

按照上面的错误消息建议，使用--force或--legus-peer-deps运行相同的命令并不能解决问题。

删除节点_模块和包锁。json和运行npmi也不能解决问题。




Answer 1

它通过删除“节点模块”文件夹和“包锁”对我起了作用。json的文件。然后，我将react和react dom版本都更改为17.0.2，而不是Gavriel的答案所建议的18.0.0https://stackoverflow.com/a/71836018/12490294.然后，在app文件夹中，我运行

    npm i web-vitals --save-dev

然后

    npm start

应用程序已成功启动

Answer 2

查看这里的Github问题。

以下是临时解决方法：

>

转到已安装的cra模板包文件夹，并在“template.json”文件中将“@testing library/react”：“^12.0.0”更改为“@testing library/react”：“^13.0.0”

返回你的根文件夹，运行npx create react app my app（你的应用名称）——模板文件：PATH_to_your_CUSTOM_模板

此外，您可以让构建失败，删除node_modules文件夹以及json包。锁定文件。打开包裹。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 Removeimport reportWebVitals from'/报告WebVitals' 来自索引。js RemovereportWebVitals（） 从索引底部开始。js

最后运行npm安装

Answer 3

匿名用户

在此之前，您可以删除节点_modules文件夹和包锁。json。接下来，打开包。json和change
“react”：“^18.0.0”

您也可以尝试以下方法（joooni1998建议）：

1. 删除node_模块和包锁。json
2. 运行npm i web vitals--save dev
3. 运行npm安装

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