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

Question

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

npmcreate-react-appdependency-treereact-18

28

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已经修复了这个问题。现在它可以正常创建项目了。

- hayata_suenaga

这个问题现在应该已经解决了。你还能重现吗？ - Dan Abramov

@DanAbramov，您能否写一篇官方答复吗？ - Bergi

7个回答

7

请查看这里的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 文件中移除 import reportWebVitals from './reportWebVitals';

从 index.js 文件底部移除 reportWebVitals();

最后运行 npm install 命令

- DougM

谢谢！可以确认这适用于TypeScript模板（包的名称是cra-template-typescript）。我也不需要删除reportWebVitals。 - Akshit Baunthiyal

我想采用自定义模板的方法，但是当我在不同的目录中运行“npm install cra-template”时，会收到以下消息：“已更新，1秒内审核了4个软件包”，但是在该目录中没有安装任何内容。也没有template.json文件可以修改。如果有任何指针，请不吝赐教。 - Jonny

“react”，“react-dom”，“@testing-library/react” - 上述提到的包中哪一个是罪魁祸首？ - Bergi

2

这段文字的意思是：“我通过删除 'node_modules' 文件夹和 'package-lock.json' 文件来解决了这个问题。然后，我按照 Gavriel's answer https://dev59.com/p1EG5IYBdhLWcg3wKFbw#71836018 的建议，在 package.json 文件中将 react 和 react-dom 版本都改为 17.0.2 而不是 18.0.0。然后，在 app 文件夹中运行了一些操作。”

    npm i web-vitals --save-dev

那么

    npm start

该应用程序成功启动。

- dreamers-blog

1

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

或者通过 npm install -g npm@8.3.0 降级 npm 并创建 react 应用。

- Tauleshwar Thakur

0

你可以使用 yarn add create-react-app your-app 代替

- Khanh D Trần

0

已经过去一年多了，尽管提问者建议在新版本的create-react-app中修复了这个问题，但事实并非如此。同时，在package.json中降级React也没有起作用。不得不冒险使用--legacy-peer-deps命令才能使我的应用程序正常运行。

- Cedric Ipkiss

-2

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

如果这样还不行，那么删除 node_modules 文件夹，从头开始安装。

- Eragon_18

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gavriel · Accepted Answer

暂时解决此问题的方法是删除 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。