when using create-react-app dependencies @testing-library could not resolve

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.

When I used npm start it gives this error:

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'

I tried with clear cache,

deleting node modules and then again installing them (npm install),

Then changed from package.json to this:

change "react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g. "react": "^17.0.2" & "react-dom": "^17.0.2".

Finally, run npm install.

None of the solutions worked for me. How can I solve this?

Answer 1

From

React JS npm start shows failed to compile web-vitals

Basically run

npm i web-vitals --save-dev

on your terminal and it should work.

Answer 2

You will need to update @testing-library/react to the latest version to use it properly with React 18. Run the command:

npm i @testing-library/[email protected]

Tested on my project where I had the same problem