Next.js Discord

Discord Forum

Import aliases not working with shadcn

Unanswered
Indian mackerel posted this in #help-forum
Open in Discord
Indian mackerelOP
At the top of my index.tsx I am importing:
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

But get the error:
Cannot find module '@/components/ui/label' or its corresponding type declarations.ts(2307)

My tsconfig.json:
{
  "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,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "components/layout.ts",
    "library/mongodb.js",
    "pages/sitemap.xml.js",
    "pages/api/auth/[...nextauth]",
    "pages/api/auth/[...nextauth]"
  ],
  "exclude": ["node_modules"]
}

You can see my directory structure in the screenshot

Anything else that needs to be configured to appropriately utilize import aliases with shadcn?

12 Replies

move the components to the root should fix it
Indian mackerelOP
I moved but get same error
It does work when I run the app, but the vscode error still shows
@Indian mackerel Click to see attachment
Ray
I still see the components folder is inside the @ folder?
Indian mackerelOP
That was the old screenshot my mistake
I just meant to upload this, the warning
This is the directory
Indian mackerelOP
After I moved the components directory to the root instead of the @, when I install new shadcn components it doesn’t show the error for them, but the existing ones continue to show the import error even after reinstalling them