How Can I Fix Shadcn Installation Errors in a React + Vite Project on Ubuntu?

Below is a checklist of things to verify (with code examples) to help resolve the issue.

---

1. Verify Your Tailwind Setup

Make sure you’ve added Tailwind correctly. You should have run:

BASHCopied
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

And have your Tailwind configuration set up according to the docs.

---

2. Update TypeScript Configurations

Ensure your TypeScript configuration files define the correct path aliases. In your root tsconfig.json, you should have something like:

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

And in tsconfig.app.json, include:

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

This helps both your IDE and the CLI resolve the imports like @/components/ui/button.

---

3. Update your Vite Configuration

Ensure you have the correct alias configuration in your vite.config.ts:

TSCopied
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
});

This step is essential for the Shadcn CLI to correctly update and find your components.

---

4. Run the Shadcn CLI from the Project Root

Make sure you run the CLI commands in the project’s root directory. For example, initialize your project with:

BASHCopied
npx shadcn@latest init

Or if you want to use default options:

BASHCopied
npx shadcn@latest init -d

Then add components:

BASHCopied
npx shadcn@latest add button

---

5. Check Node Version & Permissions

• Node Version: Verify that your Node.js version is compatible (generally v16 or later).
• Permissions: On Ubuntu Linux, ensure you don’t run into permission issues. If necessary, avoid using sudo with npm commands by configuring npm properly.

---

Final Thoughts

Review every configuration file and ensure the commands are run within the correct directory. Often, issues arise because the CLI cannot resolve your custom alias ("@") or because one of the configuration steps was skipped or misconfigured.

If after verifying all steps the error persists, try removing node_modules and reinstalling:

BASHCopied
rm -rf node_modules package-lock.json
npm install

This troubleshooting flow usually resolves the common errors encountered when installing Shadcn UI in a React + Vite setup on Ubuntu.