How to Fix "Module Not Found" Error in React (Complete Guide with Examples)

Learn how to fix the React "Module not found" error with step-by-step solutions, examples, and best practices. Covers import paths, npm packages, Vite, CRA, and Webpack.

How to Fix "Module Not Found" Error in React

Introduction

One of the most common errors that React developers face is the "Module not found" error.

This error usually appears when React cannot locate the file, package, or module that you are trying to import.

Whether you're using Vite, Create React App (CRA), Next.js, or Webpack, the solutions are mostly the same.

In this guide, you'll learn:

• What this error means
• Why it happens
• How to fix it step by step
• Real-world examples
• Best practices to prevent it

What Does "Module Not Found" Mean?

When React displays:

Module not found:Can't resolve './components/Navbar'

it means React searched for the file but couldn't find it.

Common Causes

1. Wrong Import Path

❌ Incorrect

import Navbar from "./component/Navbar";

✅ Correct

import Navbar from "./components/Navbar";

2. File Does Not Exist

If your project structure is

src ├── components │      ├── Navbar.jsx

then importing

import Navbar from "./components/NavBar";

will fail because the filename is different.

3. Case Sensitivity

Windows sometimes ignores case.

Linux does not.

Wrong

import Header from "./Components/Header";

Correct

import Header from "./components/Header";

4. Missing npm Package

Example

import axios from "axios";

but axios isn't installed.

Fix

npm install axios

or

yarn add axios

5. Incorrect Relative Path

Wrong

import Button from "./Button";

Correct

import Button from "../components/Button";

6. Wrong File Extension

Wrong

import Home from "./Home";

If the file doesn't exist.

Correct

Home.jsx

or

Home.js

Complete Example

Project Structure

src│├── components│      Navbar.jsx│├── App.jsx

App.jsx

import Navbar from "./components/Navbar";function App() {  return (    <>      <Navbar />    </>  );}export default App;

Navbar.jsx

function Navbar() {  return <h1>Welcome to SamWithCode</h1>;}export default Navbar;

Best Practices

✔ Keep folder names lowercase

✔ Use consistent naming

✔ Install packages correctly

✔ Restart the development server

✔ Use VS Code auto import

✔ Avoid duplicate folders

✔ Keep components organised

Frequently Asked Questions

Why does React say "Can't resolve module"?

React cannot find the file or package you're importing.

Why does it work on Windows but fail on Linux?

Linux is case-sensitive.

Should I restart the server?

Yes.

Sometimes Vite or Webpack caches old files.

Conclusion

The "Module not found" error is one of the easiest React errors to fix once you know what causes it.

Most issues come from:

• Incorrect file paths
• Missing packages
• Case-sensitive filenames
• Wrong project structure

Always double-check your imports before spending time debugging.