Problem running npx shadcn-ui@latest init in WSL Terminal
I'm following this guide to set up OpenSaas in the template/app directory using Wasp and WSL (Windows Subsystem for Linux) as per this guide https://docs.opensaas.sh/start/getting-started/. I'm trying to integrate ShadCN following this: https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553
I've followed everything as per the instructions(left the existing tailwindcss files intact), but when I try to run:
npx shadcn-ui@latest init
I receive the following error:
sh
sh: 1: shadcn-ui: not found
Environment:
Wasp version: 0.14.2
Platform: WSL2 on VSCode on Windows 10 Pro
Node.js version:v20.17.0
npm version: 10.8.2
Please help me I just got started with Wasp and I would love to continue to use it if shadcn can be integrated!
13 Replies
Hi @FabulousRay. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand that you're having trouble integrating ShadCN with Wasp in your WSL environment. Based on the information provided, it seems like the
shadcn-ui command is not being recognized, which could be due to a variety of reasons.
Unfortunately, the knowledge sources provided do not contain specific information about resolving this issue in a WSL environment. However, they do contain some general troubleshooting steps that might be helpful:
1. Ensure that you have followed all the steps in the gist (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553) correctly. This includes modifying all the necessary files and imports as described.
2. Try restarting your development environment. As mentioned in one of the Discord threads (https://discord.com/channels/686873244791210014/1223573142199341129), a user was able to resolve a similar issue simply by restarting their computer.
3. Verify that you're using a compatible version of Wasp. The users in the Discord threads were using versions 0.12 and 0.13 of Wasp when they were able to successfully integrate ShadCN.
If you're still having trouble after trying these steps, I would recommend reaching out to the Wasp community for further assistance. They may be able to provide more specific guidance based on their experiences with Wasp and WSL.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @FabulousRay, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Hello?
did you install shadcn and run the command in wsl?
you might have run it in poweshell by mistake...
Yup wsl, tried npm install afterwards still same error
We have updated the gist to work with the latest changes in the CLI. Please try it now 🙂 https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553
Gist
Using ShadCN with Wasp 0.12+
Using ShadCN with Wasp 0.12+. GitHub Gist: instantly share code, notes, and snippets.
thanks for the update
i tried it, shadcn installed but when i did wasp this happened :start [plugin:vite:css] [postcss] Unexpected token, expected "," (86:10)
92 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
93 | @apply !left-7
94 | }
| ^
95 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
96 | @apply !right-7
i remove the @ alias from tsconfig.json and adjusted the aliases in components.json and this happened
This looks like a CSS error to me. Did you configure
tailwind.config.cjs and postcss.config.cjs and your CSS file for Tailwind? Did you restart the wasp start after you set everything up?yup this is what happened after did wasp start after setting everything up
Wohooo @FabulousRay, you just became a Waspeteer level 1!
i didn't touch anything else in tailwind.config.cjs and postcss.config.cjs and my CSS file (main.css) other than what was required in the shadcn gist setup instructions. its still the same from the deafult opensaas template
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
postcss.config.cjs
Putting your CSS in the Tailwind Playground: https://play.tailwindcss.com/cJDCFkZZu6?file=css
It says
border-border doesn't exist, maybe remove it and see what happens?Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
hmm now the app works
that's very odd
i'll let you know if any other problems arise