← All guides

"Could not resolve" on Vercel but it builds locally: case-sensitive imports

Your vibe-coded app builds on your Mac but fails on Vercel with "Could not resolve ./components/Button". Here is why file-name case matters and how to fix it.

macOS and Windows file systems are case-insensitive by default; Vercel builds on Linux, which is case-sensitive. AI code generators frequently import components with a different capitalization than the file name, so the build works on your machine and fails in CI.

Typical error

[vite]: Rollup failed to resolve import "@/components/ui/Button" from "src/main.tsx".
Module not found: Can't resolve '../components/header'

Step 1: find the mismatch

Compare the import path with the real file name character by character:

import { Button } from '@/components/ui/Button'  // ❌
// file on disk: src/components/ui/button.tsx
import { Button } from '@/components/ui/button'  // ✅

Step 2: rename via git, not just Finder

If you want to rename the file instead, git may not notice a case-only rename on macOS. Use:

git mv src/components/header.js src/components/Header.js

Step 3: prevent it

Enable forceConsistentCasingInFileNames in tsconfig.json, and run a clean build in a Linux container or GitHub Action before deploying.

{ "compilerOptions": { "forceConsistentCasingInFileNames": true } }

Related build breakers

Packages imported but missing from package.json (they worked in the Bolt/Lovable sandbox cache), and strict TypeScript errors when the build script runs tsc before vite build.