Fixing React's 'Module not found: Can't resolve' Error

The Error ScenarioYou’re deep in the zone, building a new React component. You save your file, expecting a hot reload, but instead, your screen turns red. A massive error overlay appears, shouting:

Module not found: Can't resolve './Component' in '/src/components'

Almost every React developer hits this wall eventually. It simply means your bundler—be it Vite, Webpack, or Turbopack—is looking for a file that isn't where you said it would be. Even if you can see the file sitting in your sidebar, the compiler is clearly lost.

Why This HappensThe compiler usually fails to resolve a path for one of five common reasons:

• Simple Typos: You wrote import Header from './Headr'. We've all done it.- Case Sensitivity: You named the file Navbar.jsx but imported navbar. This works on Windows but breaks instantly on Linux-based deployment servers like Vercel or Netlify.- Extension Confusion: Vite, unlike older versions of Create React App, often requires explicit .jsx or .tsx extensions in the import path.- Path Depth: You’re using ../ when you’re actually three levels deep and need ../../../.- Stale Cache: Your build tool is remembering a file structure that no longer exists.## Step-by-Step Fixes### 1. Audit Your Relative PathsStart by checking the literal path. Look closely at the error message; it tells you exactly which directory it’s searching. Trace the path manually from the file where the import is written. In 90% of cases, the file is just one folder further up or down than you think. Incorrect:

// Location: src/components/layout/Header.js
import Button from './components/Button'; // Error: 'components' is a sibling of 'layout', not a child.

Correct:

// Use '../' to move up one level first
import Button from '../Button';

2. Solve the Case Sensitivity TrapThis is the most deceptive bug in web development. Windows and macOS are generally case-insensitive, meaning they treat UserCard.js and usercard.js as the same file. However, Linux is case-sensitive. If your import casing doesn't match the filename exactly, your app will run locally but crash during deployment.

If you renamed a file and Git didn't pick it up, use this command to force the change:

git mv src/components/oldname.js src/components/OldName.js

3. Handle Vite and Next.js ExtensionsModern build tools like Vite are stricter than the old Webpack defaults. If you are importing a component and getting a resolution error, try adding the extension explicitly.

import MyComponent from './MyComponent.jsx';

If adding the extension fixes the issue, you can either keep it explicit (recommended for Vite) or update your vite.config.js to include extensions: ['.js', '.jsx', '.ts', '.tsx'] in the resolve object.

4. Switch to Absolute ImportsStop wrestling with "dot-dot-slash" hell. Absolute imports let you reference the src folder as a root, making your code cleaner and easier to move around. This is a permanent fix for pathing headaches.

Add a jsconfig.json (or tsconfig.json for TypeScript) to your project root:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Now, regardless of how deep your file is, you can import components like this:

import Button from 'components/shared/Button';

5. Nuke the CacheSometimes the development server gets confused after a major refactor or a branch switch. If the code is perfect but the error won't go away, clear the internal cache. Stop your terminal and run:

• Vite: rm -rf node_modules/.vite && npm run dev- Next.js: rm -rf .next && npm run dev- CRA: Simply restart the process with npm start.## How to Verify the FixDon't just trust the hot reload. Follow these three steps to ensure the error is gone for good:
• Hard Refresh: Hold Shift and click the reload button in your browser to clear the frontend cache.- Check the Terminal: Ensure the "Compiled successfully" message appears without hidden warnings.- Run a Production Build: Execute npm run build locally. If the build succeeds, your path resolution is solid and won't break during deployment.## Summary of SolutionsCauseQuick FixTypoMatch import name to the filename exactly.Path LevelCount your ../ steps carefully.OS CasingUse git mv to fix filename casing for Linux.Vite ConfigAdd .jsx extension to the import.Ghost ErrorDelete .vite or .next folders and restart.