Next.js Discord

Discord Forum

Need help with deploy in Vercel

Unanswered
French Lop posted this in #help-forum
Open in Discord
French LopOP
Im trying to deploy in vercel but I got an errors with import modules... :

Failed to compile.
./src/modules/core/components/Header/Header.tsx
Module not found: Can't resolve '@/src/ui/sheet'
https://nextjs.org/docs/messages/module-not-found
./src/modules/core/components/mode-toggle/ModeToggle.tsx
Module not found: Can't resolve '@/src/ui/dropdown-menu'
Error: Command "npm run build" exited with 1

My structure projest is like :
└── src/
├── modules/
│ └── core/
│ └── components/
│ ├── Header/
│ │ └── Header.tsx
│ └── mode-toggle/
│ └── ModeToggle.tsx
└── ui/
├── sheet.tsx
├── button.tsx
└── dropdown-menu.tsx

The imports of my Header component :
import {Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger} from "@/src/ui/sheet";
import {Search, Menu} from "lucide-react";
import {ModeToggle} from "@/src/modules/core/components/mode-toggle/ModeToggle";


The imporst of my ModleTogle component:
import { Button } from "@/src/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/src/ui/dropdown-menu"

I am using Shadcn , I have this in my component.json :
{
"aliases": {
"modules": "@/src/modules",
"utils": "@/src/lib/utils",
"ui": "@/src/ui",
"lib": "@/lib",
"hooks": "@/hooks",
"components": ""
},
}

And finally my tsconfig.json :
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./"]
}
},

5 Replies

Silver Fox
Does npm run build work when run locally?
French LopOP
Yep, it does
Silver Fox
Not sure if this is the fix you're looking for, but shadcn/ui's official documentation uses "@/*" and "./*" instead of just "@/" and "./":
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
Someone on Reddit with a similar issue ([reddit.com/.../nextjs_shadcnui_cannot_resolve_components](https://www.reddit.com/r/nextjs/comments/165iiel/nextjs_shadcnui_cannot_resolve_components/?rdt=49960)) ended up creating a new repository and reinstalling everything, so you might have to do just that.