CODEWITHSUNDEEP
reactjsnpmdependenciesreact-domtesting-library
Arshana Atapattu
Arshana Atapattu

Reputation: 51

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

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?

Upvotes: 4

Views: 18205

Answers (5)

Sai Kiran
Sai Kiran

Reputation: 21

[I would advise not] using npx create-react-app and instead use npm create vite@latest

I spend so much time solving the errors with npx just go with vite

Upvotes: 2

Jijo Cleetus
Jijo Cleetus

Reputation: 2867

If you got above error message, assuming the project folder already created with error. Just do cd project_name and execute below command to install the compatible react testing library.

npm i @testing-library/react

Upvotes: 2

Utsav Joshi
Utsav Joshi

Reputation: 41

Your testing library version(12.1.5) is expecting a lower than 18 version of react. Update to the version of testing library that is compatible with your react JS version(18.0.0). Just try:

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

If you then run into following error while starting your react app: Module not found: Error: Can't resolve 'web-vitals', just run npm install web-vitals

Upvotes: 4

CPlusPatch
CPlusPatch

Reputation: 358

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

Upvotes: 0

alexCoder
alexCoder

Reputation: 31

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.

Upvotes: 3

Related Questions