Skip to main content
RapidDev - Software Development Agency
Cursor

How to Fix 'Module Not Found' in Cursor

Error Output
$ Module not found: Can't resolve '@/components/Button' in '/app/src/pages'

The 'Module not found' error in Cursor usually means a package isn't installed, the import path is wrong, or your TypeScript path aliases aren't configured. Run npm install, check your import paths, and verify tsconfig.json aliases to fix it.

Book a free consultation
4.9Clutch rating
600+Happy partners
17+Countries served
190+Team members
CursorBeginner~5 minMarch 2026RapidDev Engineering Team
TL;DR

The 'Module not found' error in Cursor usually means a package isn't installed, the import path is wrong, or your TypeScript path aliases aren't configured. Run npm install, check your import paths, and verify tsconfig.json aliases to fix it.

What this error means

This error tells you that the bundler (Webpack, Vite, or Turbopack) tried to follow an import statement but couldn't find the file or package you referenced. It looked in node_modules and your project directories but came up empty.

You typically see this right after Cursor's AI agent adds a new import to your file, or after it creates a component in a different location than expected. The AI sometimes uses import paths that assume a different project structure than what you actually have.

The error is blocking — your app won't compile until every import resolves to a real file.

Common causes

Package not installed

Cursor added an import for a library (like framer-motion or zod) that isn't in your package.json yet.

Wrong import path

The AI generated a path like '@/components/Button' but the file lives at '@/components/ui/Button' in your project.

Missing path alias

Your tsconfig.json doesn't have a '@/*' alias configured, so the bundler doesn't know where '@/' points to.

Case sensitivity mismatch

The import says 'Button' but the file is named 'button.tsx'. Works on macOS, fails on Linux/CI.

File was moved or deleted

Cursor moved a file as part of a refactor but didn't update all the imports that reference it.

Missing file extension

Some bundler configs require explicit extensions (.js, .ts) in import paths, especially in ESM-only projects.

How to fix it

First, read the error message carefully — it tells you exactly which module it can't find and which file is trying to import it.

If it's a package name (like 'framer-motion'), install it:

npm install framer-motion

If it's a path alias like '@/components/Button', check two things: (1) does the file exist at that path, and (2) is your tsconfig.json alias set up correctly.

If Cursor created the file in the wrong place, either move the file to match the import, or update the import to match where the file actually is.

Before
typescript
// tsconfig.json — missing paths alias
{
"compilerOptions": {
"baseUrl": "."
}
}
After
typescript
// tsconfig.json — fixed with @/ alias
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

Expected result: Your app compiles successfully and all imports resolve. No more red squiggles in Cursor.

Prevention tips

  • Always run 'npm install' after Cursor adds new package imports to your code
  • Set up path aliases in tsconfig.json before starting — Cursor will use them consistently
  • Use Cursor's @ file mention to point the AI at your actual project structure before asking it to create components
  • Keep file names lowercase with dashes (button-group.tsx) to avoid case sensitivity issues across platforms

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

I'm getting a 'Module not found' error in my Cursor project. The full error is: [paste error here] My project uses [Next.js / Vite / etc.] with TypeScript. Here's my tsconfig.json: [paste tsconfig] Please: 1. Tell me exactly why the module can't be found 2. Show me the fix (install command or config change) 3. Explain how to prevent this from happening again

Cursor Prompt

I'm getting a 'Module not found' error for '@/components/Button'. Please: 1. Check if the file exists at src/components/Button.tsx 2. If not, find where Button is actually located and update the import 3. Verify my tsconfig.json has the correct path aliases 4. Don't create a new file — fix the import to point to the existing one

Frequently asked questions

Why does Cursor keep generating wrong import paths?

Cursor's AI generates imports based on common conventions, but your project structure might differ. Use the @ file mention feature to show the AI your actual file tree before asking it to create new components. You can also add path guidelines to your .cursorrules file.

Should I use relative imports or path aliases?

Path aliases (@/components/...) are generally better for readability and maintainability. Set up a '@/*' alias pointing to your src directory in tsconfig.json. Most frameworks (Next.js, Vite) support this out of the box.

The error only appears in CI but works locally — why?

This is almost always a case sensitivity issue. macOS is case-insensitive by default, so 'Button' and 'button' resolve to the same file. Linux (most CI environments) is case-sensitive. Make sure your import path exactly matches the filename casing.

How do I fix 'Module not found' after Cursor refactors my code?

Cursor sometimes moves files without updating all imports. Use your editor's 'Find All References' (Shift+F12) on the old path to find broken imports, then update them. You can also ask Cursor: 'Find and fix all broken imports in this project.'

Can RapidDev help me set up my Cursor project correctly?

Yes — our team has configured hundreds of AI-assisted development environments. We can set up your project structure, path aliases, linting rules, and .cursorrules file so Cursor generates clean, correct code from the start. Book a free consultation to get started.

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your issue.

Book a free consultation

Need help debugging Cursor errors?

Our experts have built 600+ apps and can solve your issue fast. Book a free consultation — no strings attached.

Book a free consultation

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We'll discuss your project and provide a custom quote at no cost.