[Bug]: npx shadcn-vue@latest Get npm ERR! Invalid Version:

[insuber]

Reproduction

https://nuxt.new

Describe the bug

I'm experiencing an issue while trying to follow the installation tutorial provided at https://www.shadcn-vue.com/docs/installation/nuxt.html. After completing all the steps correctly, I encountered an error when executing the command:
npx shadcn-vue@latest init
Here's the error message I received:

npx shadcn-vue@latest init
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
npm ERR! Invalid Version:

This error persists even though I have already installed the [email protected] package both globally and as a local project dependency.

The specific version [email protected] works fine
npx [email protected] init

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
    Memory: 8.36 GB / 15.84 GB
  Binaries:
    Node: 20.9.0 - D:\nodejs\node.EXE
    Yarn: 1.22.21 - D:\nodejs\yarn.CMD
    npm: 10.1.0 - D:\nodejs\npm.CMD
    pnpm: 9.1.0 - D:\nodejs\pnpm.CMD
    Watchman: 20231008.002904.0 - C:\Users\insub\scoop\shims\watchman.EXE
  Browsers:
    Chrome: 125.0.6422.60
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    nuxt: ^3.11.2 => 3.11.2
    shadcn-nuxt: ^0.10.4 => 0.10.4
    shadcn-vue: 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]

Maybe it's related to your npm cache or global binaries
Can you use this command for listing installed global binaries

npm list -g

If the list has shadcn-vue remove it with

npm remove -g shadcn-vue

[insuber]

npm list -g
D:\nodejs -> .\
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

And pnpm list -g get:

pnpm list -g
Legend: production dependency, optional only, dev only

C:\Users\xxx\AppData\Local\pnpm\global\5

dependencies:
@shopify/cli 3.60.1

npx shadcn-vue@latest add still not work:

npx shadcn-vue@latest add input
Need to install the following packages:
[email protected]
Ok to proceed? (y) npm ERR! canceled

npm ERR! A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2024-05-21T10_06_04_324Z-debug-0.log

2024-05-21T10_06_04_324Z-debug-0.log:

183 timing idealTree Completed in 9481ms
184 timing command:exec Completed in 24004ms
185 verbose stack TypeError: Invalid Version: 
185 verbose stack     at new SemVer (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\semver\classes\semver.js:38:13)
185 verbose stack     at compare (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\semver\functions\compare.js:3:32)
185 verbose stack     at Object.gte (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\semver\functions\gte.js:2:30)
185 verbose stack     at Node.canDedupe (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\node.js:1079:32)
185 verbose stack     at PlaceDep.pruneDedupable (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:426:14)
185 verbose stack     at new PlaceDep (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:278:14)
185 verbose stack     at #buildDepStep (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:933:18)
185 verbose stack     at async Arborist.buildIdealTree (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:196:7)
185 verbose stack     at async Promise.all (index 1)
185 verbose stack     at async Arborist.reify (C:\Users\xxx\AppData\Roaming\nvm\v20.9.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:159:5)
186 verbose cwd D:\Sites\shopify\nuxt-app
187 verbose Windows_NT 10.0.19045
188 verbose node v20.9.0
189 verbose npm  v10.1.0
190 error Invalid Version: 
191 verbose exit 1
192 timing npm Completed in 25110ms
193 verbose unfinished npm timer reify 1716286030939
194 verbose unfinished npm timer reify:loadTrees 1716286030940
195 verbose unfinished npm timer idealTree:buildDeps 1716286031044
196 verbose unfinished npm timer idealTree:node_modules/c12 1716286038280
197 verbose code 1
198 error A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2024-05-21T10_06_55_312Z-debug-0.log

npx [email protected] add input work fine.

npx [email protected] add input
√ Component input already exists. Would you like to overwrite? ... yes
√ Done.

@sadeghbarati

[insuber]

I've noticed that the pnpx shadcn-vue@latest add input command is working well now.
But the generated components were not placed under the project root directory, such as:
D:\Sites\project\nuxt-app\components\ui\badge
Instead, they were generated outside the project directory:
D:\Sites\project\components\ui\badge

I executed the command in the directory: D:\Sites\project\nuxt-app
pnpx shadcn-vue@latest add badge

[sadeghbarati]

That is weird working with pnpm dlx or pnpx but not with npx :'(

can you purge your npm-cache folder/directory?

[sadeghbarati]

If you are in Nuxt/JS project check this issue

#291