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;

Mancy

Can't resolve 'web-vitals' : Seems like you should install web-vitals using npm i web-vitals. – Convolution

Resolved after deleting & re-installing all packages. May be there was missing packages due to slow internet. Thanks Ajeet Shah. – Mancy

Answer 1

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.

Corrinnecorrival

For those using yarn: yarn add -D web-vitals – Gisarme

Interesting, create-react-app gives an issue, but installing web-vital again sorts the problem. – Vegetate

Answer 2

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

Mina

Answer 3

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

Teriann

Answer 4

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

Gahl

Answer 5

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

Sassoon

I did it and it did not work, you have to use npm install web-vitals. – Vegetate

Answer 6

I have been struggling with this for a whole day, things I have tried are

1. Removing modules/ package.lock.json
2. Directly installing Web-Vitals.
3. Updating node and NPM versions.

None of it worked, but I found this updated version of WebVital file and it worked. Please see if replacing the following with content of reportWebVitals file works for you.

You need to use (metric: MetricType) => void as Replacement type.

import { MetricType } from "web-vitals";

const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
      onCLS(onPerfEntry);
      onINP(onPerfEntry);
      onFCP(onPerfEntry);
      onLCP(onPerfEntry);
      onTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

Agency

Answer 7

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

Diagnostic

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. – Colosseum

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. – Vegetate