Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

Works on my Mac, Vercel says Module not found: Can't resolve '@/components/Navbar'

Solved · 2408 views · asked by arash · edited
claude-codenextjsverceldeployment

Build log:

Module not found: Can't resolve '@/components/Navbar'

https://nextjs.org/docs/messages/module-not-found

> Build failed because of webpack errors

The file is RIGHT THERE. I can see it in VS Code, it builds locally, @/ alias works for 20 other imports. I'm losing my mind.

What I’ve tried

Deleted node_modules and .next, rebuilt locally (works), cleared the Vercel build cache and redeployed (fails).

Comment
Run git ls-files | grep -i navbar and paste the output. ollie_dev · edited
Deleting node_modules is the universal first move and it never works for this one lol lucia_fer · edited

3 answers

Marked as helpful by the asker
rafa_dev · edited

Check the actual filename in git. I bet it's navbar.tsx (lowercase) or was at some point.

macOS is case-insensitive, so Navbar and navbar are the same file for you. Vercel builds on Linux, which is case-sensitive. And git on Mac usually has core.ignorecase = true, so renaming the file in Finder doesn't tell git anything changed.

git ls-files | grep -i navbar
# components/navbar.tsx   <- there it is

git mv components/navbar.tsx components/tmp.tsx
git mv components/tmp.tsx components/Navbar.tsx
git commit -m "Fix Navbar filename case"

The two-step rename is there because a direct case-only rename is flaky on case-insensitive filesystems.

Comment
components/navbar.tsx. I renamed it last week because Claude said components should be PascalCase. Unreal. Fixed. arash · edited
Classic. Every team hits this once. elif_y · edited
Came here from Google with the exact same error on a folder name (Components/ vs components/). Same fix works for folders. ximena_c · edited
katja_s · edited

To stop it from happening again: forceConsistentCasingInFileNames: true in tsconfig makes TypeScript complain locally when an import's casing doesn't match the file. It's on by default in new projects, but older templates sometimes have it off.

Comment
bea_quinn · edited

git config core.ignorecase false in the repo makes git notice case-only renames from now on. Careful though: if you then rename in Finder, git can end up tracking both navbar.tsx and Navbar.tsx. The two-step git mv is the safe habit.

Comment
noted, I'll just use git mv from now on arash · edited

Related

Users get 'Failed to find Server Action' right after every deploysolved
Deployed to Vercel, env vars exist, but Supabase client says url is undefined0 ans.
npm run dev works fine but npm run build fails with a wall of type errorssolved
Build passes but the deployed function says ENOENT for a JSON file I read with fssolved
Build works on my Mac, Vercel says Module not found: Can't resolve '@/components/ui/Button'solved

Your answer

Sign in to write an answer