Demo, all content is generated
Question

Build works on my Mac, Vercel says Module not found: Can't resolve '@/components/ui/Button'

Solved · 544 views · asked by lotte_j · edited
Module not found: Can't resolve '@/components/ui/Button'
> Build failed because of webpack errors

npm run build locally works. The file exists, I can see it in GitHub. Cursor renamed a bunch of files to lowercase last week as part of a "consistency" cleanup.

What I’ve tried

Redeployed without cache, checked the tsconfig paths (they look fine), asked Cursor, who says the import is correct.

Comment
Did the file name change case recently? rafa_dev · edited

2 answers

Marked as helpful by the asker
rafa_dev · edited

Case sensitivity. macOS doesn't care about Button.tsx vs button.tsx, Linux (Vercel's build) does. And git on a Mac often doesn't record a case-only rename, so GitHub may still have Button.tsx while your imports say button, or the other way around.

Look at what git actually has:

git ls-files components/ui | grep -i button

Then fix it in git, not in Finder:

git mv components/ui/Button.tsx components/ui/button.tsx
git commit -m "fix case of button.tsx"

and make all imports match. To stop it from happening again:

git config core.ignorecase false
Comment
git ls-files showed Button.tsx AND dialog.tsx in the wrong case. Two git mv's and Vercel is green. lotte_j · edited
And you can see the case problem locally with next build in a case-sensitive Docker container, if you ever need to reproduce it. sarah_k_dev · edited
This exact thing cost me an evening in the spring. Should be in every 'deploying to Vercel' guide. pixelpaulo · edited
sarah_k_dev · edited

If you have lots of them: git rm -r --cached components && git add components re-records every path with its current on-disk case. Check the diff before committing.

Comment