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:
<code>.
├── 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
</code>
<code>.
├── 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
</code>
.
├── 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:
<code>{
"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"]
}
</code>
<code>{
"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"]
}
</code>
{
"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:
<code>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'
</code>
<code>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'
</code>
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!