React JS npm start shows failed to compile web-vitals

Question

I'm getting the error:

failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'. Since new to react JS, could not find what happened. Here is the reportWebVitals.JS file. Thanks in advance for the help. "/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals' in 'E:\ReactResources\RectProjects\test-app\src'"

const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
  getCLS(onPerfEntry);
  getFID(onPerfEntry);
  getFCP(onPerfEntry);
  getLCP(onPerfEntry);
  getTTFB(onPerfEntry);
});
}};
export default reportWebVitals;

_Can't resolve 'web-vitals'_ : Seems like you should install `web-vitals` using `npm i web-vitals`. — Ajeet Shah, Dec 21 '20 at 17:33
Resolved after deleting & re-installing all packages. May be there was missing packages due to slow internet. Thanks Ajeet Shah. — ssajid.ru, Dec 21 '20 at 18:19

score 82 · Answer 1 · edited Jun 06 '21 at 12:56

82

You need to install web vitals. Open your terminal and run the following command:

npm i web-vitals --save-dev

Also, deleting the whole thing and reinstalling might work, but that's a longer process.

edited Jun 06 '21 at 12:56

Cody Gray - on strike

239,200
50
490
574

answered Feb 13 '21 at 11:20

Kelly Austin

859
4
7

3

For those using **yarn**: `yarn add -D web-vitals` – pistou Sep 28 '21 at 16:37
Interesting, create-react-app gives an issue, but installing web-vital again sorts the problem. – Hola Soy Edu Feliz Navidad Feb 14 '22 at 04:33

score 10 · Answer 2 · answered Nov 05 '21 at 13:55

For anyone coming here from starting a brand new app with create-react-app: If you are using npm but run create-react-app without explicitly specifying it, it will use yarn when available. I was able to bypass this issue by adding the flag --use-npm.

So, for example:

npx create-react-app my-app --use-npm

Source

score 3 · Answer 3 · answered Oct 21 '22 at 16:12

3

for me following worked
first do npm uninstall react-scripts
then do npm install react-scripts

answered Oct 21 '22 at 16:12

Prince Singh

87
6

score 1 · Answer 4 · answered Jan 04 '21 at 22:14

1

Delete all the files & Folders inside test-app folder. Reinstall all the packages now and start npm. It will work.

answered Jan 04 '21 at 22:14

passionFinder

121
1
13

score 1 · Answer 5 · answered Jan 13 '22 at 13:07

1

If you have created your project with create-react-app, all the dependencies should be there when you run npm install.

Make sure you did that by navigating to the root directory and running:

npm install

answered Jan 13 '22 at 13:07

Ikdemm

1,804
1
11
25

1

I did it and it did not work, you have to use npm install web-vitals. – Hola Soy Edu Feliz Navidad Feb 14 '22 at 04:34

score -2 · Answer 6 · answered Dec 22 '21 at 12:55

-2

I closed my terminal and opened again. Works for me!

answered Dec 22 '21 at 12:55

Makini Makini

5
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 22 '21 at 13:35
1

No, this is not correct, web vitals fails due to a wrong package check, which implies that closing the terminal will not sort the issue. – Hola Soy Edu Feliz Navidad Feb 14 '22 at 04:36

React JS npm start shows failed to compile web-vitals

6 Answers6

Linked