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

This error means your bundler (Webpack, Vite, or Next.js) can’t find a file or package you’re trying to import.

Fix 1: Check the import path

The most common cause — a typo or wrong path:

// ❌ Wrong — case matters on Linux/CI
import Header from './components/header';

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

Also check:

• File extension (.ts vs .tsx vs .js)
• Relative path (./ for same directory, ../ for parent)
• The file actually exists at that path

Fix 2: Install the missing package

If it’s a package name (not a path), you need to install it:

npm install lodash

Check if it’s in your package.json:

cat package.json | grep lodash

If it’s a dev dependency:

npm install --save-dev @types/lodash

Fix 3: Delete node_modules and reinstall

rm -rf node_modules package-lock.json
npm install

Fix 4: Check TypeScript path aliases

If you’re using path aliases like @/components/..., make sure they’re configured:

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next.js handles this automatically if tsconfig.json is set up. Vite needs vite-tsconfig-paths plugin.

Fix 5: Check file extensions in Next.js App Router

Next.js App Router requires specific file names:

• page.tsx (not index.tsx)
• layout.tsx
• loading.tsx

// ❌ Won't work in App Router
app/dashboard/index.tsx

// ✅ Correct
app/dashboard/page.tsx