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在创建的目录中运行时会出现web-vitals缺少 from 的错误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 问题。

这是一个临时解决方法：

• 使用“npm install cra-template”将 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中删除从index.js底部import reportWebVitals from './reportWebVitals';删除reportWebVitals();

最后运行 npm install