close

[Solved] Module not found: Can’t resolve ‘web-vitals’ in React 18

I am just trying to create a new project with this command npx create-react-app nfc_app but I am facing the following error: m ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0 npm ERR! react@”^18.0.0″ from the root project
npm ERR! peer react@”<18.0.0″ from @testing-library/react@12.1.5
npm ERR! @testing-library/react@”^12.0.0″ from the root project Still, the command produces my project directory but when I ran my project I am facing the following module error: Module not found: Can’t resolve ‘web-vitals’ in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How Module not found: Can’t resolve ‘web-vitals’ in React 18 Error Occurs?

I am just trying to create a new project with this command npx create-react-app nfc_app but I am facing the following error:

npm ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0 npm ERR! react@”^18.0.0″ from the root project
npm ERR! peer react@”<18.0.0″ from @testing-library/react@12.1.5
npm ERR! @testing-library/react@”^12.0.0″ from the root project

But Still, the command produces my project directory but when I ran my project I am facing the following module error.

Module not found: Can’t resolve ‘web-vitals’

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Module not found: Can’t resolve ‘web-vitals’ in React 18 Error?

  1. How To Solve Module not found: Can't resolve 'web-vitals' in React 18 Error?

    To Solve Module not found: Can't resolve 'web-vitals' Error Alternatively, You can Downgrade React to its Earlier version. First of all Just Delete node_modules folder.
    Then Delete package-lock.json file. Now, Open Your package.json file and change react react-dom to an earlier version "react": "^17.0.2" & "react-dom": "^17.0.2" Now, you can run npm install. and Now, your error must be solved.

  2. Module not found: Can't resolve 'web-vitals' in React 18

    To Solve Module not found: Can't resolve 'web-vitals' Error To Install Missing Dependency Follow this step. First of all, Open Your project and Delete node_modules folder. Then Delete package-lock.json file. Now, Just install whichever package is missing. In my case it was web-vitals was missing so I just ran npm i web-vitals –save-dev. and then ran npm install Now, Your error must be solved and you can run npm run build and npm start again.

Solution 1: Install Missing Dependancy

To Install Missing Dependency Follow this step.

  1. First of all, Open Your project and Delete node_modules folder.
  2. Then Delete package-lock.json file.
  3. Now, Just install whichever package is missing.
  4. In my case it was web-vitals was missing so I just ran npm i web-vitals –save-dev.
  5. and then ran npm install
  6. Now, Your error must be solved and you can run npm run build and npm start again.

Solution 2: Downgrade React

Alternatively, You can Downgrade React to its Earlier version.

  1. First of all Just Delete node_modules folder.
  2. Then Delete package-lock.json file.
  3. Now, Open Your package.json file and change react react-dom to an earlier version
  4. "react": "^17.0.2" & "react-dom": "^17.0.2"
  5. Now, you can run npm install.
  6. and Now, your error must be solved.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

1 thought on “[Solved] Module not found: Can’t resolve ‘web-vitals’ in React 18”

Leave a Comment