What causes "Module not found: Can't resolve '@/components/MyComponent'"?

Typo in the file path or component name (case-sensitive on Linux) The @ alias not configured in tsconfig.json or jsconfig.json The file was deleted or moved but imports weren't updated Wrong file extension (importing .tsx file without extension on case-sensitive systems)

Error2 Fixes Available

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

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

What does this error mean?

Next.js supports the @ path alias to refer to the project root. This error means either the file doesn't exist at the path you specified, the alias isn't configured, or there's a typo in the import path.

Common Causes

Typo in the file path or component name (case-sensitive on Linux)
The @ alias not configured in tsconfig.json or jsconfig.json
The file was deleted or moved but imports weren't updated
Wrong file extension (importing .tsx file without extension on case-sensitive systems)

How to Fix It (2 Solutions)

Configure the @ alias in tsconfig.json

Add the paths configuration to enable the @ alias.

Code

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

Check the exact file path

Verify the file exists and the casing matches exactly (Linux is case-sensitive).

Code

# Check if file exists
ls src/components/MyComponent.tsx

# Common mistake: wrong case
# ❌ import { myComponent } from '@/components/mycomponent'
# ✅ import { MyComponent } from '@/components/MyComponent'

Related Errors

Error: Hydration failed because the initial UI does not match

View fix

Dynamic server usage: headers/cookies called in static context

View fix

Error: Invalid src prop — hostname not configured in next.config

View fix

Browse all error fixes