Cant install on a Js project

[ayofimihan]

i keep getting this error everytime i try to install on my non-ts project

Failed to load tsconfig.json. Couldn't find tsconfig.json

[dan5py]

Hi @ayofimihan. These components are meant for TypeScript projects. If you want to use them in a js project you can copy them from the docs and remove the types.

[prashantchhonker]

I am facing the same issue. I am following the installation instructions to the dot. Which means running the following commands.

npx create-next-app@latest nextjs-test --typescript --tailwind --eslint
npx shadcn-ui@latest init
npx shadcn-ui@latest add button

[dan5py]

@prashantchhonker did you cd into the nextjs-test folder?

[dan5py]

@ayofimihan the latest version of the cli adds the support for JavaScript 🚀 .

[Namnika]

Hi @dan5py I recently faced this issue, I am also using js, and trying to install this lib. But When I use this npx shadcn-ui@latest add alert-dialog using the latest cli version it instantly gives me the error Failed to load tsconfig.json. Couldn't find tsconfig.json. I am not used to with this tsconfig.json. And also I have init components.json using this npx shadcn-ui@latest init.

Any suggestions? What to do?

[spiritoftime]

Hello @Namnika @prashantchhonker ,i assume you are using react js. I have been using shadcn at my own js react vite project too, you can use my starter repo if you like. https://github.com/spiritoftime/shadcn-reactjs-starter

[alangardner-dev]

I ran into this issue as well with a non-TS project. I manually added a tsconfig.json file at the root of the project and inserted the block of code provided in step 4 of the manual instructions. Then I ran the init command npx shadcn-ui@latest init and stepped through the questions - specifying 'no' to the "Would you like to use TypeScript (recommended)?" questions. When I installed the Badge component, it added a .jsx file into components/ui dir.

[Namnika]

@spiritoftime Thank you so much for sharing the repo link! :) And I tried to do it with customization of React + Vite + shandcn which worked well.

Thanks All of the way!

[sakettawde]

Found the issue You need to add a jsconfig.json to the file to mention the alias paths if you have a need to support any

For eg.

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

The error message needs to be updated to specify missing jsconfig.js file instead of tsconfig.json file when tsx is false in components.json file

[sungkhum]

Found the issue You need to add a jsconfig.json to the file to mention the alias paths if you have a need to support any

For eg.

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

The error message needs to be updated to specify missing jsconfig.js file instead of tsconfig.json file when tsx is false in components.json file

Thanks! That was my problem!

[ayofimihan]

Thanks everyone, I now fully use typescript lol.

[SantiagoCC97]

Hello @Namnika @prashantchhonker ,i assume you are using react js. I have been using shadcn at my own js react vite project too, you can use my starter repo if you like. https://github.com/spiritoftime/shadcn-reactjs-starter

Thanks!,

[itsOmSarraf]

Hello @Namnika @prashantchhonker ,i assume you are using react js. I have been using shadcn at my own js react vite project too, you can use my starter repo if you like. https://github.com/spiritoftime/shadcn-reactjs-starter

Thanks :)

[ayushsoni1010]

Thanks :D

[sanchitrk]

@spiritoftime, thank you so much. it worked. I am so happy now!

[GeekyNaved]

Found the issue You need to add a jsconfig.json to the file to mention the alias paths if you have a need to support any

For eg.

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

The error message needs to be updated to specify missing jsconfig.js file instead of tsconfig.json file when tsx is false in components.json file

Thanks it worked for me

[Dodong2]

@spiritoftime Thank you so much for sharing the repo link! :) And I tried to do it with customization of React + Vite + shandcn which worked well.

Thanks All of the way!

in my React.js vite its not working still the same error.

[7Aceace]

It seems like it is back to not supporting the jsconfig.json. I have created the jsconfig.json and used the path but the error tsconfig.json appears.

Any solution to this?

[harshkandera]

npx shadcn-ui@latest add stepper failed to use this

[aleBranching]

If using vite vite.config.js also needs to be updated.

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

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

I don't like typescript

[AllSparkTech100]

Thanks a lot sakettawde

[pHanToMcaNCoDE]

Hey!

If you're having this issue,

'Failed to load jsconfig.json. Couldn't find tsconfig.json'

while running the shadcn installation command, just do the following:

1. Create a 'tsconfig.json' or 'jsconfig.json' at the root directory of your project (create the file at the directory where your package.json file is located).

2. Add the following to the new file created:

For Ts: { "compilerOptions": { "target": "es6", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src"] }

For Js: { "compilerOptions": { "target": "es6", "module": "commonjs", "checkJs": true }, "include": ["src"] }

3. You can run the command again and it will work 💯. Be sure to check shadcn docs so as to answer the questions asked correctly.

✌🏼

[ParshvLimbad]

@spiritoftime you are the goat, thanks

[ideabrian]

I ran into this issue as well with a non-TS project. I manually added a tsconfig.json file at the root of the project and inserted the block of code provided in step 4 of the manual instructions. Then I ran the init command npx shadcn-ui@latest init and stepped through the questions - specifying 'no' to the "Would you like to use TypeScript (recommended)?" questions. When I installed the Badge component, it added a .jsx file into components/ui dir.

Used this on Aug 4, 2024 - and it worked.

[nullnullsieben]

https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==

Brian Ball @.***> schrieb am Mo., 5. Aug. 2024, 06:35:

I ran into this issue as well with a non-TS project. I manually added a tsconfig.json file at the root of the project and inserted the block of code provided in step 4 of the manual instructions https://ui.shadcn.com/docs/installation/manual. Then I ran the init command npx @.*** init and stepped through the questions - specifying 'no' to the "Would you like to use TypeScript (recommended)?" questions. When I installed the Badge component, it added a .jsx file into components/ui dir.

Used this on Aug 4, 2024 - and it worked.

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/821#issuecomment-2268154242, or unsubscribe https://github.com/notifications/unsubscribe-auth/BIO77CLUX7NCLFUN3DVPTZLZP36INAVCNFSM6AAAAAAZ4VL4D2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRYGE2TIMRUGI . You are receiving this because you are subscribed to this thread.Message ID: @.***>