Closed ayofimihan closed 10 months ago
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.
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
@prashantchhonker did you cd
into the nextjs-test
folder?
@ayofimihan the latest version of the cli adds the support for JavaScript 🚀 .
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?
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
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.
@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!
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
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!
Thanks everyone, I now fully use typescript lol.
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!,
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 :)
Thanks :D
@spiritoftime, thank you so much. it worked. I am so happy now!
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
@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.
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?
npx shadcn-ui@latest add stepper failed to use this
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
Thanks a lot sakettawde
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:
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).
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"] }
✌🏼
@spiritoftime you are the goat, thanks
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 commandnpx shadcn-ui@latest init
and stepped through the questions - specifying 'no' to the "Would you like to use TypeScript (recommended)?" questions. When I installed theBadge
component, it added a.jsx
file intocomponents/ui
dir.
Used this on Aug 4, 2024 - and it worked.
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: @.***>
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