Issue with alias with vite

[aleguern]

Hello, I followed the vite tutorial tsconfig.json

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

vite.config.ts

alias: {
        '@': path.resolve(__dirname, './src'),
      },

But when I try to add a button

  File: /Users/E8026/Documents/dev/campus/campus_backoffice/src/components/ui/button.tsx:5:19
  11 |  import { Slot } from "@radix-ui/react-slot";
  12 |  import { cva } from "class-variance-authority";
  13 |  import { cn } from "@/lib/utils";
     |                      ^

The file exists and I can navigate to it from the component, still don't understand what could be the issue,

Thank you

[yashwanth2804]

I too still faced this issue, cannot be able to setup tailwind successfully also. Hope that documentation addresses this quickly

Thank you

[magoz]

Check that baseUrl and paths are inside compilerOptions, not below it.

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

Related: https://github.com/shadcn-ui/ui/issues/1641#issuecomment-1741913721

Figured out the specific problem. It was just me not reading the instructions carefully enough.

Step 4 reads: Edit tsconfig.json Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error

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

I read "Add the code below the compilerOptions" instead of "Add the code bellow .... to the compilerOptions" Might be good to re-word this in case other people read too fast like I did. maybe: "Add the following code to the compilerOptions" to remove an chance of a misread.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.