CODEWITHSUNDEEP
reactjstypescripttailwind-cssvite
Sulejman
Sulejman

Reputation: 161

Can Shadcn ui be installed for Vite + React with javascript and not typescript?

I am having trouble installing and using shadcn components on mt vite + react + tailwind project. i tried following the guide in their documentation here. It seems that it requires typescript for it to work?

I tried to:

  1. Create a React Javascript project with Vite
  2. Install Tailwind for Vite React from their doc.
  3. Follow the shadcn guide in their docs i linked above.

It says it needs the "tsconfig.json" file, which means typescript. I then tried the steps above again, but instead of javascript i created a Typescript project. But it still did not work, i get this error when i try to run the server with npm run dev : EISDIR: illegal operation on a directory, read

I have uploaded the source code on github here

Upvotes: 6

Views: 9269

Answers (5)

Nikhil Nishad
Nikhil Nishad

Reputation: 1

  1. create jsconfig.json in root folder and paste the below content
 {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
  1. update vite.config.js with below content

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
  1. Run on terminal (Verifies everything and initialize shadcn)
npx shadcn-ui@latest init

Upvotes: 0

mr.kashyap sandesh
mr.kashyap sandesh

Reputation: 21

create jsconfig.json in root folder and paste the below content

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

update vite.config.js with below content

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

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

Upvotes: 2

Ganesh Danuri
Ganesh Danuri

Reputation: 11

create jsconfig.json in root folder and paste the below content

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

update vite.config.js with below content

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

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

Upvotes: 1

Rakesh Sahu
Rakesh Sahu

Reputation: 21

you need to create the file with name: "jsconfig.json" instead of "tsconfig.json".

Additionally you to need to ensure that "tsx" flag is set to false, since you will be using javascript. Source shadcn installation

And your tailwind.config.js should include index.html in the content field along with others, as that's the root of vite application react apps. Source tailwind vite installation

Upvotes: 2

David Medrano
David Medrano

Reputation: 34

import { Button } from "@/components/ui/button" Should work

Upvotes: 1

Related Questions