Cannot find module '../../@/components/ui/button' and Cannot find module '@/lib/utils' or its corresponding type declarations.

[msafdev]

So i just started ts + vite + tailwind. tried installing shadcn and the button component to test it out, but it gave this error message. tried looking for the same issue here but didnt find any solution. i have run npx shadcn-ui init and it still didnt work, i dont use react server component.

[xn1cklas]

Can you please share your import, your components.json and the folder structure of your project?

[shivxmr]

So i just started ts + vite + tailwind. tried installing shadcn and the button component to test it out, but it gave this error message. tried looking for the same issue here but didnt find any solution. i have run npx shadcn-ui init and it still didnt work, i dont use react server component.

You can try this npx shadcn-ui@latest init

[msafdev]

I solved this problem by just moving the downloaded components into a ui folder in my src/components/ui and also the lib/utils. i think i messed up when I first init the library.

[stephanebruckert]

I solved this problem by just moving the downloaded components into a ui folder in my src/components/ui and also the lib/utils. i think i messed up when I first init the library.

works, however the shadcn cli moves it to / (above src) by default, which causes this issue:

Module not found: Error: You attempted to import ../../@/components/ui/button which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

@shadcn do you recommend to put @ into src by default (React app here btw), if so should the cli take care of it?

[stephanebruckert]

@vim-diesel also update your components.json with:

"aliases": {
  "components": "src/@/components",
  "utils": "src/@/lib/utils"
}

[vim-diesel]

@stephanebruckert sorry I deleted my comment. I messed up putting the compiler options in before initializing. I deleted the project and tried again and seems to be working okay now.

[geekaara]

I encountered the same issue, my mistake was in pasting "baseUrl": ".", "paths": { "@/*": ["./src/*"] } outside the compilerOptions, please do check

[StreetDevs]

I have the same issue but i tried all the above but is still does not work

[lethib]

@StreetDevs I think that you have the same folder structure as mine:

.
└── src/
    ├── components/
    │   └── ui/
    │       └── button.tsx
    └── lib/
        └── utils.ts

Solved the problem by changing the following line in the button.tsx file:

import { cn } from "@/lib/utils";

by:

import { cn } from "src/lib/utils";

It looks like the @ alias doesn't work (I don't know why though...)

[shadcn]

@lethib What's in your tsconfig.json?

[lethib]

@shadcn My tsconfig.json looks like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

In fact, the alias "works": I don't get any direct typescript error (the import of the cn function is accepted by typescript with the alias just above). The error occurs only during the compilation.

[theG0ulart]

@shadcn , that problem occurs only during the compilation when using Create React App + Shadcn-UI

Today I lost a lot of time trying to solve that, but I fail.

@shadcn , any plans to solve that error??

[IronHeartDan]

My mistake was configuring ts config file after npx shadcn-ui@latest init

I resolved by again going through the setup, and this time I setup ts config file first "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] }, }

Then ran npx shadcn-ui@latest init

Incase if it helps someone

[efgomes]

aqqui acontece a mesma coisa, vite com typescript, quando instalo o shadcn ele fica na raiz do projeto, 6 horas tentando resovler isso, vou deixar aqqui e vou continuar usando o antd ate conseguir resolver esses imports

[yeongbin-jo]

yarn run v1.22.21
$ tsc -b && vite build
src/components/ui/button.tsx:5:20 - error TS2307: Cannot find module '@/lib/utils' or its corresponding type declarations.

Still same issue occured :sob: I edited tsconfig.json and vite.config.ts both as document.

[yeongbin-jo]

I solved this problem by adding baseUrl, paths config to tsconfig.app.json.

Like below:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

[dandheedge]

I solved this problem by adding baseUrl, paths config to tsconfig.app.json.

Like below:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

This works for me. Thank you 👍

[KaziMdMehediHasan]

I solved this problem by adding baseUrl, paths config to tsconfig.app.json.

Like below:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

It's finally working for me!

[efgomes]

I solved this problem by adding baseUrl, paths config to tsconfig.app.json.

Like below:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

fiz seguindo o codigo do colega, mas como podem ver na iamgem abaixo ele continua sendo criado o @na raiz

[deno-source]

"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

终于找到了一个靠谱的答案

[sovetski]

Thanks @yeongbin-jo, I was editing all tsconfig files except tsconfig.app.json, I don't understand why we have a lot of tsconfig files but anyway you saved my day

[Govinda088]

I solved this problem by adding baseUrl, paths config to tsconfig.app.json.

Like below:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

You are GodSend.

[Quinlivanner]

我通过将baseUrl 、 paths config 添加到tsconfig.app.json解决了这个问题。

 就像下面这样：

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src"]
}

Worked for me!!amazing!

[Noudea]

When using shadcn/ui, you might encounter import issues due to path aliasing configuration.

For example if you have this kind of structure

Project Structure

.
└── src/
    ├── components/
    │   └── ui/
    │       └── button.tsx
    └── lib/
        └── utils.ts

Required Configuration

You need to configure both vite.config.ts and tsconfig.json:

// vite.config.ts
resolve: {
  alias: [
    { find: '@', replacement: path.resolve(__dirname, 'src') },
    { find: '@libs', replacement: path.resolve(__dirname, 'src/lib') }
  ]
}

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@libs/*": ["./src/lib/*"]
    }
  }
}

This will allow imports like:

import { cn } from "@libs/utils"

Key Points

Make sure paths match exactly in both files You could have to restart TS Server after config changes

How to Restart TypeScript Server

Using Command Palette

1. Cmd/Ctrl + Shift + P
2. Type "TypeScript: Restart TS Server"
3. Press Enter

[Govinda088]

When using shadcn/ui, you might encounter import issues due to path aliasing configuration.

For example if you have this kind of structure

Project Structure

.
└── src/
    ├── components/
    │   └── ui/
    │       └── button.tsx
    └── lib/
        └── utils.ts

Required Configuration

You need to configure both vite.config.ts and tsconfig.json:

// vite.config.ts
resolve: {
  alias: [
    { find: '@', replacement: path.resolve(__dirname, 'src') },
    { find: '@libs', replacement: path.resolve(__dirname, 'src/lib') }
  ]
}

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@libs/*": ["./src/lib/*"]
    }
  }
}

This will allow imports like:

import { cn } from "@libs/utils"

Key Points

Make sure paths match exactly in both files You could have to restart TS Server after config changes

How to Restart TypeScript Server

Using Command Palette

1. Cmd/Ctrl + Shift + P
2. Type "TypeScript: Restart TS Server"
3. Press Enter

Thank you very much for the information it will a great help for someone in future.

[1saifj]

after changing the ts.config sometimes you need to exit VsCode or the editor, and if you running VsCode its worth trying restarting the TS server.