Getting "No import alias found in your tsconfig.json file."

[rykugur]

I'm brand new to electron and vite; I created an electron project from this template: https://github.com/electron-vite/electron-vite-react

Here are the contents of tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": ["src", "electron"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

As you can see, I do have the paths prop defined, and it looks to match what is in the shadcn vite docs. The template also comes pre-packaged with tailwind, and it appears to be working fine.

When running the command npx shadcn@latest init, I get the following error in my terminal:

>npx shadcn@latest init

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✖ Validating import alias.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

What obvious thing am I missing?

[salman-koda]

i have same issue when i using remix, i got error in validating tailwind css and validating import alias, so for now i create manual my components.json and install a several library like

• class-variance-authority
• clsx
• react-icons
• lucide-react
• tailwindcss-animate
• tailwind-merge

[said1296]

Having the same issue with Vite 5.4.2, I tried adding the alias to tsconfig.app.json, tsconfig.json and tsconfig.node.json

[Romany-GL]

you need to add ./ before the src in your tsconfig.json

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

[codecreativedm]

@Romany-GL is correct. I didn't have a paths in my tsconfig.json, adding it within the compilerOptions fixed the issue.

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

[shaalle]

you need to add ./ before the src in your tsconfig.json

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

thank you very much, i was googling almost one day and finally yours helped me after adding it ./ before src boom it worked like magic btw am using jsconfig.json file and it worked.

[Muhammad-Hasham-Khalid]

OMG, I have been scratching my head on this for hours. THANK YOU VERY MUCH @Romany-GL

[said1296]

Expanding on the issue, this doesn't work:

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

But it works if I change "./lib/*" for "./src/*", not sure if this is an expected behavior, but I will move my UI library code to ./src for now.

[johnpatrick254]

Incase you have the same issue, there's a dirty fix without having to move your code to src,

1. set the path property to
   paths": {
   "@/": [
   "./src/"
   ]
   },
   just to pass the alias validation check , this will pass the validation check,

2. before proceeding with the setup, change the tsconfig path to your working directory in my case
   paths": {
   "@/": [
   "./app/"
   ]
   },

3. proceed with the setup, the component.json will be setup with your working directory and you can proceed to install components with the cli and the components will be installed in your working directory

[jacobmichels]

thank you, worked for me! this should not be necessary

[naseroish]

this setup worked for me if you are importing component like this import Button from 'components/Button'; notice im not using @ or ./
also i dont have src directory
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Next.js",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noUncheckedIndexedAccess": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"/": ["./"]
},
"types": ["node", "jest", "@testing-library/jest-dom"],
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", "**/.mjs", "jest.config.js", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

[AbdelrahmanAbounida]

this one worked for me tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],              
      "@/components/*": ["./src/components/*"], 
      "@/lib/*": ["./src/lib/*"],             
      "@/styles/*": ["./src/styles/*"]         
    },
    "verbatimModuleSyntax": true,
    "ignoreDeprecations": "5.0"
  }
}

[mujahidinfo]

I had the same problem and this worked for me. I added the alias to tsconfig.json and it worked. Thanks for sharing!

[timjam]

The path can't be anything else than ./src/*. That's a bit weird as it might confuse the project structure if you don't have srcin the project root. ShadCN init will create it there after the path is set.

[AnatoliiCubex]

Strange behavior when its working only with .src/*, for example Next project can be created without src folder(just /app) with alias ./src/app/* and in case Im using src/app, shadcn creates a lib folder in the same level as app (src/app,src/lib)

Well, as I found out its not that hard to update componnets.json file that is basically a config for future imports(becase by default it will also create a components folder on the same level as app folder) but would be nice if shadcn supported any alias

[yordis]

The following fixes the situation:

--- a/webapps/web1/tsconfig.json
+++ b/webapps/web1/tsconfig.json
@@ -6,7 +6,7 @@
     "allowJs": true,
     "baseUrl": ".",
     "jsx": "preserve",
-    "paths": { "@/*": ["src/*"] }
+    "paths": { "@/*": ["./src/*"] }
   },
   "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

[mxvsh]

i added ./ and it worked

[SonnyAD]

Hello,
To help me debug my problem, I saw that shadcn is using the package tsconfig-paths. So I opened node in my project root in REPL mode $ node. Then I imported the package:

const tsConfigPaths = require("tsconfig-paths");

And finally tested to load my config like that

let tsConfig = tsConfigPaths.loadConfig("./")
tsConfig

You should be able to get enough feedback from that to identify the problem in your config. Like mine was that I declared the paths outside of compilerOptions xD

Reference from the shadcn code too:

ui/packages/cli/src/utils/get-project-info.ts

Line 157 in 0873835

export async function getTsConfigAliasPrefix(cwd: string) {

[jamesbuch]

The tool now gives a link to the docs on how to use it with vite, which may have been updated recently. I have in my tsconfig.json file:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

➜  app-frontend npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/index.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

➜  app-frontend 

[rickscombr]

If you are not using typescript, make sure the tsconfig.json file does not exist, if it does, remove it.
Make sure the alias is properly configured in the jsconfig.json or tsconfig.json file if you are using typescript.