ui icon indicating copy to clipboard operation
ui copied to clipboard

[bug]: CLI fails to install components after manual setup due to missing components.json

Open rigomart opened this issue 1 year ago • 2 comments

Describe the bug

It seems that when adding a component via the CLI, a conditional check is performed to ensure that the components.json file is present. However, when following the manual installation guide, this file is never created, causing the CLI to initiate its init flow. This likely results in a failure, as no valid configuration is detected unless the project contains a config file that matches the following pattern: **/{next,vite,astro}.config.*|gatsby-config.*|composer.json (see code here).

This issue was previously reported in #4885 with an Electron project, but it likely affects any project that doesn't match the expected configuration file pattern when using the manual setup.

This issue initially occurred while I was implementing a shared UI package in a Turborepo project, but I was able to reproduce it more easily on an RSBuild + React setup.

Could this error be resolved by adjusting the manual installation instructions to ensure the components.json file is created? I managed to solve this error by just manually creating a components.json file and tweaking some configs.

Affected component/components

CLI

How to reproduce

  1. Fork the linked Codesandbox project.
  2. Run pnpm dlx shadcn@latest add button.
  3. When prompted to create a components.json file, select "Yes".

Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/2k3vm9

Logs

✔ You need to create a component.json file to add components. Proceed? … yes

We could not detect a supported framework at /project/workspace.
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

Any

Before submitting

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

rigomart avatar Sep 24 '24 06:09 rigomart

I have the same issue. I checked the project out and looked at the code.

I think the bug is somewhere here located: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/src/preflights/preflight-init.ts#L54-L74

I fixed it with the following lines of code:

  const projectInfo = await getProjectInfo(options.cwd)
  if (projectInfo === null) {
    errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
    frameworkSpinner?.fail()
    logger.break()
    if (FRAMEWORKS['manual'].links.installation) {
      logger.error(
        `We could not detect a supported framework at ${highlighter.info(
          options.cwd
        )}.\n` +
          `Visit ${highlighter.info(
            FRAMEWORKS['manual'].links.installation
          )} to manually configure your project.\nOnce configured, you can use the cli to add components.`
      )
    }
    logger.break()
    process.exit(1)
  }

tobiashochguertel avatar Sep 24 '24 13:09 tobiashochguertel

Yeah I believe your solution would be a more appropriate approach than what I originally thought.

Thanks for the response.

rigomart avatar Sep 25 '24 05:09 rigomart

Just found this issue, I have the same problem:

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

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

I just wanted to know whether there are any updates on this? I followed all steps on the manual installation process: https://ui.shadcn.com/docs/installation/manual

I have to use craco in my project for other reasons, I configured a couple of things in the craco config, but nothing that should interfere with this.

npx create-react-app my-project --template typescript
cd my-project
npm install @craco/craco --save
npx tailwindcss init
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
npm install @radix-ui/react-icons

I have also adjusted all css/js files as described on the manual installation manual.

It worked perfectly fine with the 0.8.0 version, but I simply cannot get it to work here. Any help is appreciated.

YanWittmann avatar Oct 21 '24 08:10 YanWittmann

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

shadcn avatar Oct 21 '25 23:10 shadcn

This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)

shadcn avatar Oct 28 '25 23:10 shadcn