[Bug]: v0.10.5 - Unable to add components using npx

philliphartin commented 4 months ago

Reproduction

Use the CLI

Describe the bug

Since the latest release the npx shadcn-vue@latest add tabs helper no longer works. Currently using 0.10.4 to keep functionality going.

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 153.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
    bun: 1.1.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.208
    Safari: 17.5
  npmPackages:
    @vueuse/core: ^10.9.0 => 10.9.0 
    nuxt: ^3.11.2 => 3.11.2 
    radix-vue: ^1.7.4 => 1.7.4 
    shadcn-nuxt: ^0.10.4 => 0.10.4 
    vue: ^3.4.27 => 3.4.27

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

sadeghbarati commented 4 months ago

@philliphartin JS or TS project?

philliphartin commented 4 months ago

It was a TS project (Nuxt)

petertsoisstuff commented 4 months ago

Same here on nuxt project(tried npm, pnpm, bun), I think this is a bug of v0.10.5. When I follow documentation using npx shadcn-vue@latest add label it shows below success message.

√ Component button already exists. Would you like to overwrite? ... yes ✔ Done.

but cannot find files in components/ui directory.

npx shadcn-vue@v0.10.4 add label works fine.

Grinch3214 commented 4 months ago

Same problem. npx shadcn-vue@v0.10.4 add label works fine.

omar-labana commented 4 months ago

same using node v20.13.1

DarkZeus commented 4 months ago

Same here

Nuxt 3.11.2
Node v20.13.1
pnpm 9.1.2

chachew commented 4 months ago

Same issue for me with Nuxt and shadcn-vue@latest. Works fine with v0.10.4

zernonia commented 4 months ago

Hey guys.. I've just tested on Stackblitz using v0.10.5 and latest Nuxt, seems to be fine tho 🤔 https://stackblitz.com/edit/github-iqfvjd?file=package.json

petertsoisstuff commented 4 months ago

Maybe it only happens on Windows? I'm not sure what environment StackBlitz uses.

sadeghbarati commented 4 months ago

Tested on Windows 11 it's working with v0.10.5

Nuxt/TS project

Grinch3214 commented 4 months ago

Tested on Windows 11 it's working with v0.10.5

Indicates success and the component is downloaded to the desktop, and not to the project (Windows 10)

sadeghbarati commented 4 months ago

If you are in Nuxt/JS project this issue might help (component added outside of the project directory)

https://github.com/radix-vue/shadcn-vue/issues/291#issuecomment-1901788144

ShuviSchwarze commented 4 months ago

If you are in Nuxt/JS project this issue might help (component added outside of the project directory)

#291 (comment)

For my case (Nuxt/TS) the components were being added to the parent dir, this solution did fix the issue with detecting root dir.

diakonovm commented 4 months ago

If you are in Nuxt/JS project this issue might help (component added outside of the project directory) #291 (comment)

For my case (Nuxt/TS) the components were being added to the parent dir, this solution did fix the issue with detecting root dir.

Did not fix the issue for me.

zernonia commented 4 months ago

@diakonovm can you share what kind of error message you got? We need more details in what is the root cause of this issue

kawoki commented 4 months ago

If you are in Nuxt/JS project this issue might help (component added outside of the project directory)

#291 (comment)

Got the same problem as well and this did not work for me but I was able to make it work by deleting the node_modules folder then re-run pnpm install. After that, I was able to download the component.

Hope this solve your problem as well.

Nuxt: 3.11.2 Shadcn-nuxt: 0.10.4 Node: v22.2.0 pnpm: 9.0.5

gregmsanderson commented 4 months ago

I've been finding the same as the above.

Neither the linked #291 nor deleting the node_modules fixed it.

As above, when I run npx shadcn-vue@latest add sonner tooltip the CLI still runs, it says it is successful ... but now the component is no longer installed in the /components/ui folder (with the rest) but instead get added to the parent folder, in a newly created sibling components/ui folder. Weird! For now I have just manually moved them and then deleted that folder.

Nuxt app, on a Mac, using npm.

kawoki commented 4 months ago

Just tried it again and it only works when https://github.com/radix-vue/shadcn-vue/issues/291#issuecomment-1901788144 is added to the nuxt.config.ts then deleting the node_modules and running pnpm install

ejirocodes commented 4 months ago

If you are in Nuxt/JS project this issue might help (component added outside of the project directory) #291 (comment)

For my case (Nuxt/TS) the components were being added to the parent dir, this solution did fix the issue with detecting root dir.

This seems to work

gregmsanderson commented 4 months ago

@kawoki Ah ... yes! Thanks. The order matters.

sadeghbarati commented 4 months ago

Daniel Roe quote

There are a number of reasons we choose not to set baseURL, including the fact that typescript recommends against it. Let's see if we can fix the upstream issue another way.

sugoidesune commented 3 months ago

i made an npm command that moves the folders for windows. //package.json

 "shadcnmove": "robocopy \"C:\\Users\\USER_NAME\\code\\components\\ui\" \"C:\\Users\\USER_NAME\\code\\PROJECT_NAME\\components\\ui\" /move /e",

after install i run npm run shadcnmove

frenicohansen commented 3 months ago

For those who are using Nuxt, I fixed it by setting the tsConfigPath in components.json. Here is my new config.

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "default",
  "typescript": true,
  "tsConfigPath": ".nuxt/tsconfig.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "assets/css/tailwind.css",
    "baseColor": "stone",
    "cssVariables": true
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "@/utils/cn",
    "ui": "@/components/ui"
  }
}

And as an extra information, we should set the aliases.ui in components.json, if we want to change where the components should be placed. The componentsDir in nuxt.config.ts is for the auto import.

  shadcn: {
    prefix: '',
    componentDir: './components/ui',
  },

jonasfroeller commented 2 months ago

For those who are using Nuxt, I fixed it by setting the tsConfigPath in components.json. Here is my new config.
{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "default",
  "typescript": true,
  "tsConfigPath": ".nuxt/tsconfig.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "assets/css/tailwind.css",
    "baseColor": "stone",
    "cssVariables": true
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "@/utils/cn",
    "ui": "@/components/ui"
  }
}
And as an extra information, we should set the aliases.ui in components.json, if we want to change where the components should be placed. The componentsDir in nuxt.config.ts is for the auto import.
  shadcn: {
    prefix: '',
    componentDir: './components/ui',
  },

Fixed it for me too, thank you! I had tsconfig.json instead of .nuxt/tsconfig.json, because tsconfig.json extends .nuxt/tsconfig.json.

viktorsnt commented 1 month ago

Adding the following to nuxt.config.ts worked for me

components: [
    { path: './components', prefix: 'V' },
  ],

radix-vue / shadcn-vue