How to Fix "Module not found: Error: Can't resolve 'web-vitals'" in ReactJs Projects

Tutorialsrack 03/02/2025 ReactJs

Introduction

If you're encountering the error message:

Module not found: Error: Can't resolve 'web-vitals' in 'E:\ReactProject\react_admin\src'

while running a React project, you're not alone. This error often arises when the required web-vitals package is missing, incorrectly installed, or there's an issue with your project setup.

Why is This Important?

React relies on certain dependencies to function correctly, and web-vitals is often included by default in projects created using create-react-app. This package helps measure web performance but may sometimes be missing due to installation issues or version conflicts. Fixing this error ensures your project runs smoothly without breaking during build or development.

Possible Reasons for the Problem

1. web-vitals is Not Installed

Sometimes, the web-vitals package may not be installed in your node_modules directory, especially if the installation process was interrupted or package.json didn’t include it.

2. Corrupted node_modules or package-lock.json

If the node_modules directory or package-lock.json file becomes corrupted, certain packages might not be recognized correctly.

3. Dependency Version Mismatch

If your package.json references an outdated or incompatible version of web-vitals, it may not be installed properly.

4. Incorrect Import Statements

There might be incorrect import paths in your React files, causing the compiler to fail when resolving the module.

5. Issues with create-react-app Template

If you used create-react-app to initialize your project but later removed dependencies manually, web-vitals might be missing.

Possible Solutions with Explanations

1. Install web-vitals Manually

The simplest and most direct solution is to install the missing package manually using npm or yarn.

npm install web-vitals
# OR
yarn add web-vitals

This ensures the package is correctly added to your node_modules and package.json dependencies.

2. Check package.json and Dependencies

Verify whether web-vitals is listed under dependencies or devDependencies in your package.json.

"dependencies": {
  "web-vitals": "^3.1.0"
}

If it's missing, manually add it or reinstall dependencies with:

npm install

3. Remove and Reinstall node_modules

If dependency installation issues persist, deleting node_modules and reinstalling dependencies often resolves the issue:

rm -rf node_modules package-lock.json
npm install

This forces a clean installation of all dependencies, ensuring that web-vitals is properly included.

4. Update or Reinstall React and Dependencies

Your project might be running an outdated version of React that lacks web-vitals. Updating React and dependencies can help:

npm update react react-dom

Alternatively, if your project is newly created, consider rebuilding it:

npx create-react-app my-app

5. Verify Import Statements in Your Code

Ensure you're importing web-vitals correctly in your index.js or index.tsx file:

import { reportWebVitals } from './reportWebVitals';

If this file is missing, you can recreate it manually using the standard implementation from React’s documentation.

Conclusion

The Module not found: Can't resolve 'web-vitals' error in React projects is usually caused by missing dependencies, installation issues, or incorrect imports. By following the solutions outlined above—such as manually installing web-vitals, checking dependencies, or reinstalling node_modules—you can quickly resolve the issue and get your React project running smoothly.

If the issue persists, consider checking official React documentation or GitHub discussions for additional troubleshooting steps. Happy coding!

Related Posts