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

philliphartin · 2024-05-21T06:12:53Z

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

The text was updated successfully, but these errors were encountered:

sadeghbarati · 2024-05-21T06:29:13Z

@philliphartin JS or TS project?

philliphartin · 2024-05-21T07:45:30Z

It was a TS project (Nuxt)

petertsoisstuff · 2024-05-21T10:33:07Z

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 · 2024-05-21T10:59:15Z

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

omar-labana · 2024-05-21T12:51:35Z

same using node v20.13.1

DarkZeus · 2024-05-21T17:58:18Z

Same here

Nuxt 3.11.2
Node v20.13.1
pnpm 9.1.2

chachew · 2024-05-21T19:06:25Z

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

zernonia · 2024-05-22T00:04:06Z

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 · 2024-05-22T02:58:36Z

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

sadeghbarati · 2024-05-22T05:48:21Z

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

Nuxt/TS project

Grinch3214 · 2024-05-22T05:57:02Z

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 · 2024-05-22T06:06:36Z

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

#291 (comment)

ShuviSchwarze · 2024-05-22T12:55:27Z

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 · 2024-05-23T16:11:55Z

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 · 2024-05-24T01:44:55Z

@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 · 2024-05-24T17:10:12Z

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 · 2024-05-24T21:47:57Z

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 · 2024-05-25T06:28:51Z

Just tried it again and it only works when #291 (comment) is added to the nuxt.config.ts then deleting the node_modules and running pnpm install

ejirocodes · 2024-05-25T11:30:23Z

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 · 2024-05-25T19:14:25Z

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

sadeghbarati · 2024-05-26T07:33:20Z

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 · 2024-06-15T00:57:18Z

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 · 2024-06-27T18:34:49Z

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 · 2024-07-07T13:36:21Z

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 · 2024-08-05T19:23:17Z

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

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

Rednas83 · 2024-10-12T16:35:49Z

Worked for me after changing the tsConfigPath

components.json
"tsConfigPath": "./.nuxt/tsconfig.json",

But the add script is for some reason not adding the required utils in utils/shadcn.ts on my windows machine.

components.json

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

version

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.17.0
- Nuxt Version:     3.13.1
- CLI Version:      3.13.2
- Nitro Version:    2.9.7
- Package Manager:  pnpm@9.12.1
- Builder:          -
- User Config:      telemetry, debug, devtools, experimental, css, modules, shadcn, meilisearch, nitro, icon, build, routeRules, components, formkit, compatibilityDate
- Runtime Modules:  normalizedModule(), normalizedModule(), @vueuse/nuxt@11.1.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/tailwindcss@6.12.1, @nuxt/devtools@1.4.2, shadcn-nuxt@0.10.4, nuxt-meilisearch@1.3.10, @nuxt/image@1.8.1, @formkit/nuxt@1.6.7, @nuxt/icon@1.5.6
- Build Modules:    -
------------------------------

dygaomarques · 2024-11-14T13:13:52Z

Worked for me after changing the tsConfigPath

components.json "tsConfigPath": "./.nuxt/tsconfig.json",

But the add script is for some reason not adding the required utils in utils/shadcn.ts on my windows machine.

components.json

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

version

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.17.0
- Nuxt Version:     3.13.1
- CLI Version:      3.13.2
- Nitro Version:    2.9.7
- Package Manager:  pnpm@9.12.1
- Builder:          -
- User Config:      telemetry, debug, devtools, experimental, css, modules, shadcn, meilisearch, nitro, icon, build, routeRules, components, formkit, compatibilityDate
- Runtime Modules:  normalizedModule(), normalizedModule(), @vueuse/nuxt@11.1.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/tailwindcss@6.12.1, @nuxt/devtools@1.4.2, shadcn-nuxt@0.10.4, nuxt-meilisearch@1.3.10, @nuxt/image@1.8.1, @formkit/nuxt@1.6.7, @nuxt/icon@1.5.6
- Build Modules:    -
------------------------------

This worked for me too, when I was installing the package, I've changed the default tsconfig path to ./tsconfig.json and this make the package create the components outside the project folder.

rogadev · 2024-12-06T12:59:26Z

pnpm dlx is not the same as npx.
I've had far more problems with pnpm dlx when installing these components.
Furthermore, this is not what the docs use when users click-to-copy the snippet to install a component.

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

Nuxt/TS project

Worked for me after changing the tsConfigPath
components.json "tsConfigPath": "./.nuxt/tsconfig.json",
But the add script is for some reason not adding the required utils in utils/shadcn.ts on my windows machine.
components.json

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

version

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.17.0
- Nuxt Version:     3.13.1
- CLI Version:      3.13.2
- Nitro Version:    2.9.7
- Package Manager:  pnpm@9.12.1
- Builder:          -
- User Config:      telemetry, debug, devtools, experimental, css, modules, shadcn, meilisearch, nitro, icon, build, routeRules, components, formkit, compatibilityDate
- Runtime Modules:  normalizedModule(), normalizedModule(), @vueuse/nuxt@11.1.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/tailwindcss@6.12.1, @nuxt/devtools@1.4.2, shadcn-nuxt@0.10.4, nuxt-meilisearch@1.3.10, @nuxt/image@1.8.1, @formkit/nuxt@1.6.7, @nuxt/icon@1.5.6
- Build Modules:    -
------------------------------

This worked for me too, when I was installing the package, I've changed the default tsconfig path to ./tsconfig.json and this make the package create the components outside the project folder.

Eazash · 2024-12-24T21:46:39Z

Interesting behaviour I noticed is that having "tsConfigPath": "tsconfig.json" would also cause the cli to malfunction where tsconfig.json has the following contents

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

zernonia · 2025-02-23T16:17:23Z

Should be fixed now with the recent release, and updated docs 😁

https://www.shadcn-vue.com/docs/installation/nuxt

philliphartin added the bug Something isn't working label May 21, 2024

frenicohansen mentioned this issue Jun 27, 2024

[Bug]: In a javascript nuxt project the components are created outside of the project root folder #291

Closed

titusdecali mentioned this issue Oct 16, 2024

[Bug]: npx shadcn-vue@latest add drawer doesn't add any components #812

Closed

2 tasks

sadeghbarati mentioned this issue Nov 10, 2024

refactor: use get-tsconfig instead of tsconfig-paths #880

Closed

6 tasks

zernonia closed this as completed Feb 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

philliphartin commented May 21, 2024

sadeghbarati commented May 21, 2024

philliphartin commented May 21, 2024

petertsoisstuff commented May 21, 2024 •

edited

Loading

Grinch3214 commented May 21, 2024 •

edited

Loading

omar-labana commented May 21, 2024

DarkZeus commented May 21, 2024

chachew commented May 21, 2024

zernonia commented May 22, 2024

petertsoisstuff commented May 22, 2024

sadeghbarati commented May 22, 2024 •

edited

Loading

Grinch3214 commented May 22, 2024 •

edited

Loading

sadeghbarati commented May 22, 2024

ShuviSchwarze commented May 22, 2024

diakonovm commented May 23, 2024

zernonia commented May 24, 2024

kawoki commented May 24, 2024

gregmsanderson commented May 24, 2024

kawoki commented May 25, 2024

ejirocodes commented May 25, 2024

gregmsanderson commented May 25, 2024

sadeghbarati commented May 26, 2024

sugoidesune commented Jun 15, 2024 •

edited

Loading

frenicohansen commented Jun 27, 2024 •

edited

Loading

jonasfroeller commented Jul 7, 2024

viktorsnt commented Aug 5, 2024

Rednas83 commented Oct 12, 2024 •

edited

Loading

dygaomarques commented Nov 14, 2024

rogadev commented Dec 6, 2024

Eazash commented Dec 24, 2024 •

edited

Loading

zernonia commented Feb 23, 2025

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

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

Comments

philliphartin commented May 21, 2024

Reproduction

Describe the bug

System Info

Contributes

sadeghbarati commented May 21, 2024

philliphartin commented May 21, 2024

petertsoisstuff commented May 21, 2024 • edited Loading

Grinch3214 commented May 21, 2024 • edited Loading

omar-labana commented May 21, 2024

DarkZeus commented May 21, 2024

chachew commented May 21, 2024

zernonia commented May 22, 2024

petertsoisstuff commented May 22, 2024

sadeghbarati commented May 22, 2024 • edited Loading

Grinch3214 commented May 22, 2024 • edited Loading

sadeghbarati commented May 22, 2024

ShuviSchwarze commented May 22, 2024

diakonovm commented May 23, 2024

zernonia commented May 24, 2024

kawoki commented May 24, 2024

gregmsanderson commented May 24, 2024

kawoki commented May 25, 2024

ejirocodes commented May 25, 2024

gregmsanderson commented May 25, 2024

sadeghbarati commented May 26, 2024

sugoidesune commented Jun 15, 2024 • edited Loading

frenicohansen commented Jun 27, 2024 • edited Loading

jonasfroeller commented Jul 7, 2024

viktorsnt commented Aug 5, 2024

Rednas83 commented Oct 12, 2024 • edited Loading

dygaomarques commented Nov 14, 2024

rogadev commented Dec 6, 2024

Eazash commented Dec 24, 2024 • edited Loading

zernonia commented Feb 23, 2025

petertsoisstuff commented May 21, 2024 •

edited

Loading

Grinch3214 commented May 21, 2024 •

edited

Loading

sadeghbarati commented May 22, 2024 •

edited

Loading

Grinch3214 commented May 22, 2024 •

edited

Loading

sugoidesune commented Jun 15, 2024 •

edited

Loading

frenicohansen commented Jun 27, 2024 •

edited

Loading

Rednas83 commented Oct 12, 2024 •

edited

Loading

Eazash commented Dec 24, 2024 •

edited

Loading