Module not found errors on Vercel deployment with shadcn-ui and custom tsconfig.json paths

[vladimirzb]

Body:

I'm encountering issues deploying my Next.js project to Vercel where multiple "Module not found" errors appear, despite everything working perfectly in my local environment. This project utilizes shadcn-ui, and I suspect there may be complications related to path aliases in my tsconfig.json that are not being resolved correctly on Vercel.

File Structure:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

tsconfig.json Configuration:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Error Messages on Vercel:

Failed to compile.
./app/page.tsx
Module not found: Can't resolve '@/components/graficoPresupuestoHistoricoCrudo'
https://nextjs.org/docs/messages/module-not-found
./app/page.tsx
Module not found: Can't resolve '@/components/ui/accordion'
https://nextjs.org/docs/messages/module-not-found
./app/page.tsx
Module not found: Can't resolve '@/components/curlCommand'
https://nextjs.org/docs/messages/module-not-found
./app/page.tsx
Module not found: Can't resolve '@/components/graficoIpc'
https://nextjs.org/docs/messages/module-not-found
./app/page.tsx
Module not found: Can't resolve '@/components/ipccuentalatex'

I would appreciate any help to understand why these path aliases might not be working on Vercel, particularly with my usage of shadcn-ui. Any insights or similar experiences would be really helpful!

[Riyadh-Muradi]

Did you find a fix for this i got the same

[vladimirzb]

Yes. I created a new project and copy all my shadcn-ui components again and it worked. It's not the best solution, but it's the one it worked.

[L3on06]

Hi, I hope you're all doing well.

I faced a similar issue when deploying Shadcn UI components.

The problem occurred because I renamed or restructured the components. It wasn't just the renaming or restructuring itself, but rather the fact that I used PascalCase for the filenames.

Since Vercel's Linux environment is case-sensitive, this caused issues.

A good solution is to rename all the component files to lowercase, or alternatively, you can customize the tsconfig.json to adjust the paths accordingly.

[erajasekar]

I ran the same error and found that lib director was excluded from git in .gitignore file. I guess my .gitignore was autogenerated for python project. So the lib/utils.ts is never checked in to git. I guess @vladimirzb could have ran into same issue.

[AndyYangBest]

believe this is a pain finding