How to Fix "Module Not Found" Errors in Next.js 15

The Problem

Module not found: Can't resolve '@/components/Button'

Common Causes and Solutions

1. Missing Path Aliases Configuration

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. File Extension Issues

// Wrong - missing extension in some cases
import Button from '@/components/Button'

// Check if file is Button.tsx, Button.ts, or Button/index.tsx

3. Case Sensitivity (Linux Servers)

// Wrong on Linux
import Button from '@/components/button'

// Correct - match exact case
import Button from '@/components/Button'

4. Clear Next.js Cache

rm -rf .next
rm -rf node_modules/.cache
npm run dev

5. Check next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // Ensure proper module resolution
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, 'src'),
    };
    return config;
  },
};

module.exports = nextConfig;

6. Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Debugging Steps

1. Verify file exists at the imported path
2. Check for typos in import statement
3. Verify tsconfig paths match your structure
4. Clear all caches and restart