React3 min read2026-03-01
Next.js Module Not Found: Can't resolve in app directory
Resolve Next.js module resolution issues, broken tsconfig paths, and relative import failures in App Router.
Error Code / Stack Trace
Module not found: Can't resolve '@/components/Navbar'Problem Overview
Next.js compiler fails during next dev or next build because an imported path cannot be resolved.
Why Does This Happen?
- Missing or misconfigured 'paths' alias in tsconfig.json.
- Deleted or moved file still referenced in an old import statement.
- Stale .next build cache directory.
Step-by-Step Solution
Step 1: Check tsconfig.json path mappings
Ensure the '@/*' alias is mapped to the project root.
json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}Step 2: Clear .next cache and restart
Remove corrupted build artifacts.
bash
rm -rf .next && npm run devCommon Mistakes to Avoid
- •Adding paths to tsconfig.json without setting baseUrl to '.'.
Prevention & Best Practices
- Always rely on consistent path aliases rather than long chains of ../.
Frequently Asked Questions
Can I use multiple path aliases in Next.js?
Yes, you can define aliases like '@components/*': ['components/*'] in tsconfig.json.
Related Developer Solutions & Tools
Recommended Tools
Related Error Fixes