shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.36k stars 4.13k forks source link

[bug]: Command failed with exit code 1 when running shadcn init #4722

Closed niassuh1 closed 1 week ago

niassuh1 commented 1 week ago

Describe the bug

When running npx shadcn@latest init, and after answering all the questions, it goes through installing all the dependencies, and throws an error before finishing like so:

Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app\globals.css
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: yarn add tailwindcss-animate class-variance-authority lucide-react  clsx tailwind-merge
error Received malformed response from registry for "". The registry may be down.
yarn add v1.22.22
[1/4] Resolving packages...
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

However, when I try running yarn add tailwindcss-animate class-variance-authority lucide-react clsx tailwind-merge by myself, it works just fine.

Affected component/components

None

How to reproduce

  1. Creating a new NextJS app
  2. Default answer for all questions
  3. Running npx shadcn@latest init command
  4. Answers:
    • Which style would you like to use? » Default
    • Which color would you like to use as the base color? » Gray
    • Would you like to use CSS variables for theming? yes
  5. Error occurs after the installing dependencies step in the cli

Codesandbox/StackBlitz link

Not needed

Logs

Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app\globals.css
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: yarn add tailwindcss-animate class-variance-authority lucide-react  clsx tailwind-merge
error Received malformed response from registry for "". The registry may be down.
yarn add v1.22.22
[1/4] Resolving packages...
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

System Info

Windows 11, Node v18.19.1, Yarn v1.22.22

Before submitting

tlawrie commented 1 week ago

I think this might be the same issue, received with pnpm.

 tysonlawrie$ pnpm dlx shadcn-ui@latest add slider
 ENOENT  Command failed with ENOENT: shadcn-ui add slider
spawn shadcn-ui ENOENT

pnpm: Command failed with ENOENT: shadcn-ui add slider
spawn shadcn-ui ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

with npx it worked

npx shadcn@latest add slider
Need to install the following packages:
shadcn@2.0.1
Ok to proceed? (y) y
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - app/components/ui/slider.tsx
niassuh1 commented 1 week ago

Oddly enough... When I answered the questions differently as follows:

√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Neutral
√ Would you like to use CSS variables for theming? ... yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app\globals.css
✔ Installing dependencies.
✔ Created 1 file:
  - lib\utils.ts

Success! Project initialization completed.
You may now add components.

It works just fine

Also I'm running the command with npx but have a yarn.lock file in my project

shadcn commented 1 week ago

@niassuh1 I'm gonna see if I can reproduce this.

@tlawrie Please note that the new cli is shadcn and not shadcn-ui (which we'll deprecate later)

adrianhelvikspond commented 1 week ago

This command reproduces the issue:

yarn add tailwindcss-animate class-variance-authority lucide-react "" clsx tailwind-merge

Empty strings need to be removed from the command parameters.

adrianhelvikspond commented 1 week ago

Verified. This is the out put I get:

[
  'tailwindcss-animate',
  'class-variance-authority',
  'lucide-react',
  '',
  'clsx',
  'tailwind-merge'
]

after adding this console.log to the command.

function He(e,t,r){if(e=Array.from(new Set(e)),!e?.length)return;console.log(e);r={silent:!1,...r};let i=w("Installing dependencies.",{silent:r.silent})?.start(),n=await J(t.resolvedPaths.cwd);await nr(n,[n==="npm"?"install":"add",...e],{cwd:t.resolvedPaths.cwd}),i?.succeed()}

Looks like it's coming from a fetch call, so I intercepted those and found this:

{
  name: 'default',
  type: 'registry:style',
  dependencies: [
    'tailwindcss-animate',
    'class-variance-authority',
    'lucide-react',
    ''
  ],
  registryDependencies: [ 'utils' ],
  tailwind: { config: { plugins: [Array] } },
  cssVars: {},
  files: []
}

Which is coming from this file, which contains the empty string:

https://ui.shadcn.com/r/styles/default/index.json

which comes from this file: apps/www/public/r/styles/default/index.json

adrianhelvikspond commented 1 week ago

Fixed by this PR: https://github.com/shadcn-ui/ui/pull/4724

Workaround: Select "new-york" and switch style to "default" in components.json.

baken667 commented 1 week ago

Windows 11, node v20.17.0. Git Bash

$ npx shadcn@latest init npm error code ENOENT npm error syscall lstat npm error path C:\Users\baken\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\baken\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\baken\AppData\Local\npm-cache_logs\2024-09-03T16_13_16_318Z-debug-0.log

2024-09-03T16_13_16_318Z-debug-0.log log file

EDITED:

Sorry, i just forgot to add tailwind directives in main css file. If anyone has the same problem, check your css file, is it there?

@tailwind base;
@tailwind components;
@tailwind utilities;
niassuh1 commented 1 week ago

Thank you all for your efforts!