[bug]: Cannot initialize components.json using `npx shadcn@latest init` after manual installation of shadcn (for my React app)

[pr2tik1]

Describe the bug

I cannot intialize the component.json by following manual installation followed by npx shadcn@latest init.

Affected component/components

components.json

How to reproduce

1. Install shadcn from - https://ui.shadcn.com/docs/installation/manual
2. Setup components.json - https://ui.shadcn.com/docs/components-json

Codesandbox/StackBlitz link

No response

Logs

npx shadcn@latest init
⠙
✔ Preflight checks.
✖ Verifying framework.

We could not detect a supported framework at /my-app/frontend.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

System Info

GitHub Workspaces

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[joseph0926]

The documentation mentions: Note: ... only required if you're using the CLI ... In the actual code:

  if (!projectInfo || projectInfo?.framework.name === "manual") {
    errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
    frameworkSpinner?.fail()
    logger.break()

You don't need “components.json” because you're using the “manual” method, not the “cli” method

[pr2tik1]

I'm not sure if you're referring to the "manual installation" process, which might be getting confused with adding configurations using components.json or the CLI for component additions "manually".

However, as mentioned here, downgrading did help resolve my issue.

[joseph0926]

Didn't you do a “Manual Installation” via “https://ui.shadcn.com/docs/installation/manual”?

“shadcn” says that there was a major ‘cli’ update on 2024.08 ”https://ui.shadcn.com/docs/changelog” And it added the code I mentioned in my comment above, among other files that were not present in the 0.8.0 version.

  if (!projectInfo || projectInfo?.framework.name === "manual") {
    errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
    frameworkSpinner?.fail()
    logger.break()

https://github.com/shadcn-ui/ui/blob/078dfe66072c4ca780bbc99d4ad4b13b1f44fe7e/packages/shadcn/src/preflights/preflight-init.ts#L54

---

I don't know if this is a bug or intentional on the team's part, but in the latest version, npx shadcn@latest init is blocked if you proceed to “Manual Installation”.

What do you think about this?

[pr2tik1]

https://github.com/shadcn-ui/ui/discussions/4685#discussioncomment-10523330

[joseph0926]

#4685 (comment)

The reason that author(fivestones) got that error is because he didn't have a next.config file This is not a newer version error;;

Check the link code below “https://github.com/shadcn-ui/ui/blob/078dfe66072c4ca780bbc99d4ad4b13b1f44fe7e/packages/shadcn/src/utils/get-project-info.ts#L71C1-L77C4”

[pr2tik1]

Thanks @joseph0926, this is helpful!

I agree, especially if it's intentionally excluded for React-based setups (which I achieved "manually" 😅), or if it's expected to detect React via @vitejs/plugin-react (for which we see here).

I'm not entirely sure about this, but I appreciate it—your explanation makes the reason clear. Thanks again !

[joseph0926]

I agree, especially if it's intentionally excluded for React-based setups (which I achieved "manually" 😅), or if it's expected to detect React via @vitejs/plugin-react (for which we see here).

I'm not entirely sure about this, but I appreciate it—your explanation makes the reason clear. Thanks again !

Glad it helped a little bit : )

[7flash]

I am not using vite, instead Bun.build directly; downgrade is the only option?

[zachary-wang12]

Also met the same issue using webpack. Could webpack become a supported framework? Actually, it is acceptable to use mannualy installation method for init shadcn-ui. Is there any plan to use cli to add components at least?

[logemann]

I dont get it too. So this is the output right?

We could not detect a supported framework at /Users/ml/development/projects/chrome/reachpanda-extension.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

I thought this means i need to do the manual installation as mentioned in the docs and "once its configured, one can use the cli to add components", But i cant use the CLI to add components even after doing the manual installation.

I am using wxt for chrome extension development and behind the scenes it uses pretty standard react/vite setup. And i ve seen a wxt project using npx with shadcn to add components, so it cant be that it checks for a nextjs config. There must be something else the CLI looks out for which i am missing.

Update: ok i figured it out. Its a bit misleading. Looks like you need to manually create the components.json file and the related folders/files which are part of the json file. After that i was able to use the CLI to add single shadcn components.

[kejiat]

I dont get it too. So this is the output right?

We could not detect a supported framework at /Users/ml/development/projects/chrome/reachpanda-extension.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

I thought this means i need to do the manual installation as mentioned in the docs and "once its configured, one can use the cli to add components", But i cant use the CLI to add components even after doing the manual installation.

I am using wxt for chrome extension development and behind the scenes it uses pretty standard react/vite setup. And i ve seen a wxt project using npx with shadcn to add components, so it cant be that it checks for a nextjs config. There must be something else the CLI looks out for which i am missing.

Update: ok i figured it out. Its a bit misleading. Looks like you need to manually create the components.json file and the related folders/files which are part of the json file. After that i was able to use the CLI to add single shadcn components.

This worked for me with one addition - I realized I was missing a jsconfig.json file in my root directory that allow the @/ import aliases to work properly. Adding that file made the CLI work: { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }