🔧 Error Fixes
· 1 min read

Webpack: Module Not Found — Can't Resolve — How to Fix It

Module not found: Error: Can't resolve './components/Header'

Webpack can’t find the file you’re importing.

Fix 1: Check the file path

// ❌ Wrong path or missing extension
import Header from './components/Header';

// ✅ Check the actual file location
import Header from './components/Header.jsx';

Fix 2: Configure resolve extensions

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

Fix 3: Missing package

npm install missing-package

Fix 4: Case sensitivity

File systems on Linux are case-sensitive:

// ❌ Wrong case (works on Mac, fails on Linux)
import Header from './components/header';

// ✅ Match exact filename
import Header from './components/Header';

Related: Webpack: ChunkLoadError — Loading Chunk Failed — How to Fix It

Related: TypeScript: Cannot Find Module — How to Fix It

📘

You might also like

Build Failed — How to Fix JavaScript Build Errors

Build failing in Vite, Webpack, Next.js, or Astro? Here's how to fix common build errors like module not found, type errors, and out of memory.

Webpack: ChunkLoadError — Loading Chunk Failed — How to Fix It

Fix the 'ChunkLoadError: Loading chunk 5 failed' error. Common causes and step-by-step solutions.

TypeError: Assignment to Constant Variable — How to Fix It

Getting 'Assignment to constant variable' or 'TypeError: invalid assignment to const'? You're trying to reassign a const. Here's how to fix it.

TypeError: Cannot Read Properties of Null — How to Fix It

Getting 'Cannot read properties of null' or 'null is not an object'? You're accessing a property on null. Here's how to fix it.