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;
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.
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
"/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;
for me following worked
first do npm uninstall react-scripts
then do npm install react-scripts
Delete all the files & Folders inside test-app folder. Reinstall all the packages now and start npm. It will work.
"/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;
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
I closed my terminal and opened again. Works for me!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.