BuildDeployImports

Build works on my Mac, fails on deploy: wrong file name case

Module not found: Can't resolve './components/Navbar' (file is navbar.tsx)

In short: macOS and Windows ignore letter case in file names. Linux build servers don't.

Why it happens

Importing ./Navbar when the file is navbar.tsx works on your laptop but fails on Vercel, Netlify, or Cloudflare, which build on Linux. Git on macOS also often doesn't record a rename that only changes case.

How to fix it

1. Find the import named in the error and compare it letter by letter with the real filename.
2. Rename through git so the case change is recorded: git mv navbar.tsx tmp.tsx && git mv tmp.tsx Navbar.tsx.
3. Pick one convention (PascalCase for components) and update all imports.
4. TypeScript can catch this: keep forceConsistentCasingInFileNames enabled in tsconfig.json.

Copy-paste fix prompt

I'm getting this error in my app:

Module not found: Can't resolve './components/Navbar' (file is navbar.tsx)

[Paste the full error, stack trace, and the file it points to here]

Likely cause: macOS and Windows ignore letter case in file names. Linux build servers don't.

Task: Scan all relative imports and compare them with the actual file names on disk, case-sensitively. List mismatches and the git mv commands to fix them.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Claude Code, v0. Last reviewed 2026-11-13.