使用 create-react-app 依赖项时 @testing-library 无法解析

Question

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 ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.

当我使用

npm start

时，它给出了这个错误：

Compiled with problems:

ERROR in ./src/reportWebVitals.js 5:4-24

Module not found: Error: Can't resolve 'web-vitals' in 'D:\React\Education\Fetch api\my-learn\src'

我尝试清除缓存，

删除节点模块然后再次安装它们(

npm install

),

然后从 package.json 更改为：

将 "react": "^18.0.0" 和 "react-dom": "^18.0.0" 更改为早期版本，例如“react”：“^17.0.2”＆“react-dom”：“^17.0.2”。

最后，运行

npm install

。

所有解决方案都不适合我。我该如何解决这个问题？

Answer 1

来自

React JS npm start 显示编译 web-vitals 失败

基本运行

npm i web-vitals --save-dev

在您的终端上，它应该可以工作。

Answer 2

您需要将

@testing-library/react

更新到最新版本才能在 React 18 中正确使用它。 运行命令：

npm i @testing-library/[email protected]

在我的项目上进行了测试，我遇到了同样的问题

Answer 3

您的测试库版本（12.1.5）预计低于 18 版本的反应。更新到与您的 React JS 版本（18.0.0）兼容的测试库版本。尝试一下：

npm install --save-dev @testing-library/react@latest

如果您在启动 React 应用程序时遇到以下错误：

Module not found: Error: Can't resolve 'web-vitals'

，只需运行 npm install web-vitals