CLI gets stuck when adding --add-ons shadcn

[owen-vey]

Which project does this relate to?

Create Tanstack App

Describe the bug

When running the following command:
npx create-tsrouter-app@latest --add-ons shadcn

the CLI seems to hang infinitely on Setting up Shadcn... as shown below:

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

1. Run npx create-tsrouter-app@latest --add-ons shadcn from the Terminal
2. Observe that the CLI gets stuck on the "Setting up Shadcn..." step

Expected behavior

As a user, I expected the CLI to correctly set up Shadcn but I am seeing it stuck on "Setting up Shadcn..." and no warning or error is printed.

Screenshots or Videos

See above

Platform

• OS: macOS
• Node Version: v22.13.1

[anthony2261]

Same here +1

[jherr]

Shadcn is the only add-on that runs a command. So a couple of questions:

1. Can you run npx shadcn@canary init -d -s on your machine an in a project?
2. Does it get stuck if you just run npx create-tsrouter-app@latest --add-ons and you follow the prompts to make the same choice

[owen-vey]

1. npx shadcn@canary init -d -s ran fine on my machine

2. Yes, it still gets stuck when running npx create-tsrouter-app@latest --add-ons and selecting Shadcn from the prompt

[owen-vey]

I went and tested running npx create-tsrouter-app@latest and selected file-router. I then went and ran npx shadcn@canary init -d -s after the project was created and saw the following errors:

I then went and created a new project with npx create-tsrouter-app@latest --tailwind and was left with just the last error:

Just a thought, but maybe you need to add

resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
},

to vite.config.ts before running the shadcn CLI https://ui.shadcn.com/docs/installation/vite#update-viteconfigts

(as well as ensure Tailwind is installed and setup before prior)

[jherr]

We definitely do add:

resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
},

To the vite.config.ts if shadcn is enabled. I'm kinda considering just adding it all the time as its super handy.

I haven't see the React 19 warning. Interesting. If you add the --force does it work without complaint?

Worst case scenario I can just remove the npx command and manually put whatever changes it makes into the add-on itself.

[owen-vey]

Even with --force I still see the warning and have to choose a selection

It looks like it is just an issue with npm. More info here https://ui.shadcn.com/docs/react-19#tldr

[jherr]

I think I see what's happening. This is creating a new Next.js app. Yeah, to repro we really need to run that npx command within the half-built ts-router app.

I think the best thing to do is for me to just apply the patches that it makes manually in the add-on.

[owen-vey]

Weirdly enough, when I pull down and build the repo locally and run pnpm start --add-ons and select Shadcn it works fine 🤔

[jherr]

Deep sigh.

Well, I still thin the best thing to do is not run the command and to apply the patches myself. That's what we do for solid-ui since it doesn't even have a silent option.

[jherr]

Ok, should definitely be fixed now since we are no longer running the init command. Be sure to use @latest.

[owen-vey]

@jherr Yep that fixed it. I now see the same issue happening when the CLI is trying to add shadcn components once start is included in the add-ons:

[jherr]

Ok, different issue, same source-ish, which is running commands. My only thought is that somehow the CWD is set wrong. Are you running on Windows or something? Is there some way the CWD could be set incorrectly?

[owen-vey]

I'm on Mac, pretty standard shell setup. Let me try on another Macbook and see if I have the same issue.

[owen-vey]

Hmm different error:

[jherr]

Be sure to test the 0.4.2 version because 0.4.3 removes the request to load button and input which it wasn't using anyway.

Is it possible that you don't have NPX?

[owen-vey]

With 0.4.2 on the second laptop I ran into a cert error but this is a work laptop and there is some weird cert stuff going on I'm sure.

As far as having npx on the first laptop, yes, I am certain I have it

[jherr]

What's your node version? Not having toReversed makes me think that you an older node version.

[owen-vey]

Yeah that was with Node 18.20.5. I tried with LTS on Laptop 2 and that worked with create-ts-router@latest

[jherr]

Ok. Gonna have to put in a node version check. Otherwise I'll keep chasing bugs like this down a rabbit hole. My guess is that this was the underlying problem with the original npx shadcn init. Shad was probably having issues with the node version as well.

[owen-vey]

Well all my screenshots and testing before was with LTS. It was just that second laptop that was using Node 18. So there is still the hanging issue with Node LTS and the shadcn CLI stuff.

[jherr]

I don't understand. Neither shadcn, nor start are doing any installs anymore. Besides the package manager install at the end.

[owen-vey]

Oh i was saying with 0.4.2 there is still that issue. Like if you ever decide to go back to using shadcn CLI.

[jherr]

Ah, ok.

[cakriwut]

I think the issue is due to multiple --add-ons.
Where what I overserved:
Working

npx create-tsrouter-app@latest  --template file-router --add-ons tanstack-query 
npx create-tsrouter-app@latest  --template file-router --add-ons shadcn

NOT Working

npx create-tsrouter-app@latest  --template file-router --add-ons tanstack-query,shadcn

Notice the add-ons list parameter is the issue.

[anthony2261]

I ran this with the latest version (0.4.3) and it worked!

pnpx create-tsrouter-app@latest frontend --template file-router --tailwind --package-manager pnpm --no-git --add-ons shadcn,tanstack-query