Trouble with alias import in TypeScript for shadcn-ui library

Question

I'm encountering an issue with resolving TypeScript path aliases in my project. I've configured the tsconfig.json file to include path aliases using the "baseUrl" and "paths" settings, but alias imports are not working as expected.

I want to import it as an alias import like this: import { ThemeButton } from "@/src/components/ui/button";

It is not working with the alias import but when I import it like this it works. import { ThemeButton } from "../../ui/button";

I have updated my tsconfig.json to include this but it did not work

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

Here is my complete tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Answer 1

This will work fine:

import { ThemeButton } from "@/components/ui/button";