Fix 'Module not found: Can't resolve' in React imports

1. Wrong import path (the most common cause)

This one gets me — and probably you — more often than I'd like to admit. You're importing a component, say Header, and you write:

import Header from './components/Header';

But the file is actually at src/components/Header.jsx. If your current file is two directories deep, the relative path breaks.

Here's the fix: double-check the path. Use relative paths carefully. If you're in src/pages/Home.js and need src/components/Header.jsx, you'd write:

import Header from '../components/Header';

Had a client last month whose entire app crashed because they copied import from one file to another without adjusting the path. The error was clear: Module not found: Can't resolve '../Header'. Quick fix, but it took them an hour to find.

Pro tip: Use an absolute import if your project supports it (like @/components/Header with a jsconfig.json or tsconfig.json configured). It saves headaches when moving files around.

2. Missing file extension

React and webpack expect specific extensions. If you leave off .jsx or .tsx, especially for JSX or TypeScript files, you'll get this error.

Check your import:

// Wrong — will throw Module not found
import Button from './Button';

If the file is Button.jsx, you need:

import Button from './Button.jsx';

Wait — doesn't webpack resolve extensions automatically? Usually yes. But if your webpack.config.js doesn't list .jsx or .tsx in resolve.extensions, you're sunk. Or if you're using a newer Create React App or Vite setup, they handle it, but if you're stuck, explicitly add the extension.

I've seen this bite people when they rename a file from .js to .jsx to add JSX syntax. The import stays the same, and now it's broken. Always match the extension.

3. Typos in the file name or import

This sounds stupid, but it's the second most common cause I see. One wrong letter, a missing case (Windows is case-insensitive, Linux is case-sensitive), or an extra space will kill an import.

Example: you have UserProfile.jsx.

But you import:

import UserProfile from './UserProfile.jsx'; // typo: 'User' spelled 'Usr'

Or worse, the file is userprofile.jsx (lowercase) and you import UserProfile.jsx (uppercase). On macOS or Linux, that's a fail.

Fix: Look at the actual file name in your editor or file system. Copy it exactly. Case matters. Also check for hidden characters (like a space after the file name in the import — yes, I've seen that).

Quick-reference summary table

That's it. These three causes cover 90% of the 'Module not found: Can't resolve' errors in React. Check them in order — start with the path, then the extension, then the spelling. You'll be back to coding in minutes.