Fixing the "No Import Alias Found in tsconfig.json" Error in Shadcn

When setting up Shadcn in a Vite React project, you might encounter the following error:

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.

This guide will help you understand the cause of the error and walk you through fixing it in your project.

What Causes This Error?

The error occurs because Shadcn requires import aliases to be defined in your tsconfig.json file. Import aliases simplify imports by allowing you to use short, user-defined paths instead of relative paths.

For example, instead of:

import Component from '../../../components/Component'

You can use:

import Component from '@/components/Component'

If your tsconfig.json does not include the correct alias configuration, Shadcn will throw this error.

How to Fix the Error

1. Update Your tsconfig.json File

Ensure that your tsconfig.json file contains the correct alias configuration. Add the following under the compilerOptions section:

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

Explanation:

• baseUrl: Specifies the base directory for resolving non-relative module names. Setting it to . ensures the base directory is the root of your project.
• paths: Maps the alias @/* to the src folder. Replace src with your actual source directory if it’s different.

2. Add the ./ Prefix for Path Resolution

If you still encounter the error after updating tsconfig.json, ensure you add ./ before src in the paths configuration. This adjustment resolves relative paths correctly.

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

3. Check for Consistency in Your Project Setup

For TypeScript Projects:

Make sure you’re using TypeScript. Shadcn relies on tsconfig.json, which is a TypeScript configuration file. If you’re using JavaScript, you’ll need to convert your project to TypeScript or use jsconfig.json with similar settings.

For JavaScript Projects:

Use jsconfig.json instead of tsconfig.json and replicate the same configuration:

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

4. Restart Your Development Server

After making changes to tsconfig.json or jsconfig.json, restart your development server to ensure the changes take effect.

npm run dev

Example tsconfig.json File

Here’s a complete example of a working tsconfig.json for a typical Shadcn + Vite project:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Additional Notes for Astro Developers

If you’re using Astro with Shadcn, ensure your tsconfig.json includes:

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

Refer to the Shadcn Astro Installation Guide for more details.

Conclusion

The "No import alias found in your tsconfig.json file" error can be easily fixed by correctly configuring your tsconfig.json file with the required import aliases. Following the steps outlined in this guide ensures your Shadcn setup works seamlessly in Vite React or other supported environments.

Key Takeaways:

• Define baseUrl and paths in your tsconfig.json or jsconfig.json.
• Use the ./ prefix for paths to ensure correct resolution.
• Restart your development server after making changes.

With these steps, you’re ready to build robust and scalable projects with Shadcn UI!