CLI fails to install components in a PNPM monorepo with shared packages

[uncvrd]

Hi there! I just reached out on Twitter regarding the CLI monorepo compatibility with PNPM.

Conversation here: https://twitter.com/jordantlewallen/status/1671961810671644673?s=20

However, if you try running a command like:

npx shadcn-ui@latest add button

You receive an error, since I have a package.json that utilizes shared packages that don't exist on npm

For example I have packages that look like:

"@foundrydev/database": "workspace:*",
"@foundrydev/helpers": "workspace:*",
"@foundrydev/eslint-config-custom": "workspace:*",
"@foundrydev/tsconfig": "workspace:*",

View error log below 👇

View NPM error log

npx shadcn-ui@latest add button
✔ Ready to install components and dependencies. Proceed? … yes
⠼ Installing button...Command failed with exit code 1: npm install @radix-ui/react-slot
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN old lockfile database: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9)
npm WARN old lockfile  Could not fetch metadata for [email protected] database: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9) {
npm WARN old lockfile   code: 'ETARGET',
npm WARN old lockfile   type: 'version',
npm WARN old lockfile   wanted: '1.0.0',
npm WARN old lockfile   versions: [ '0.0.1', '0.0.2' ],
npm WARN old lockfile   distTags: { latest: '0.0.2' },
npm WARN old lockfile   defaultTag: 'latest'
npm WARN old lockfile }
npm WARN old lockfile tsconfig: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9)
npm WARN old lockfile  Could not fetch metadata for [email protected] tsconfig: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9) {
npm WARN old lockfile   code: 'ETARGET',
npm WARN old lockfile   type: 'version',
npm WARN old lockfile   wanted: '0.0.0',
npm WARN old lockfile   versions: [
npm WARN old lockfile     '0.0.1', '0.0.2', '0.0.3',
npm WARN old lockfile     '1.0.0', '1.0.1', '1.0.3',
npm WARN old lockfile     '1.0.4', '1.0.5', '1.0.6',
npm WARN old lockfile     '1.0.7', '1.1.0', '2.0.0',
npm WARN old lockfile     '2.0.1', '2.1.0', '2.1.1',
npm WARN old lockfile     '2.2.0', '3.0.0', '4.0.0',
npm WARN old lockfile     '5.0.0', '5.0.1', '5.0.2',
npm WARN old lockfile     '5.0.3', '6.0.0', '7.0.0'
npm WARN old lockfile   ],
npm WARN old lockfile   distTags: { latest: '7.0.0' },
npm WARN old lockfile   defaultTag: 'latest'
npm WARN old lockfile }
npm WARN old lockfile helpers: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9)
npm WARN old lockfile  Could not fetch metadata for [email protected] helpers: No matching version found for [email protected].
npm WARN old lockfile     at module.exports (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/npm-pick-manifest/index.js:209:23)
npm WARN old lockfile     at /Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/pacote/lib/registry.js:118:26
npm WARN old lockfile     at async Array.<anonymous> (/Users/jordan/GitHub/encore/node_modules/.pnpm/[email protected]/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:718:9) {
npm WARN old lockfile   code: 'ETARGET',
npm WARN old lockfile   type: 'version',
npm WARN old lockfile   wanted: '1.0.0',
npm WARN old lockfile   versions: [ '0.0.1', '0.0.3', '0.0.4', '0.0.5', '0.0.6' ],
npm WARN old lockfile   distTags: { latest: '0.0.6' },
npm WARN old lockfile   defaultTag: 'latest'
npm WARN old lockfile }
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jordan/.npm/_logs/2023-06-22T19_43_19_814Z-debug.log

Anything else I can help provide? Let me know, thanks!

[uncvrd]

I do use the @latest tag though :) Also this is failing at a different install step than that ticket

[shadcn]

What if you use pnpx shadcn-ui@latest add button or pnpm dlx shadcn-ui@latest add button?

[uncvrd]

@shadcn ahhh after all this time using pnpm I didn't realize that there was an pnpm equivalent to npx which explains my confusion on why I asked on Twitter. Yes this works, thank you @shadcn :)

[beingtyson]

I have the same issue. I tried npx shadcn-ui@latest add button and pnpm dlx shadcn-ui@latest add button, but it didn't solve the problem.

@shadcn

[donpark]

I am seeing this issue with my monorepo using latest shadcn-ui, Next.js, and pnpm.

File for the component being added does get created in @/components/ui but following error appears while adding packages needed by the component. This error occurs for all variations of the CLI command:

• npx shadcn-ui@latest add button
• pnpx shadcn-ui@latest add button
• pnpm dlx shadcn-ui@latest add button

⠴ Installing dialog...Command failed with exit code 1: npm install @radix-ui/react-dialog
npm error code EUNSUPPORTEDPROTOCOL
npm error Unsupported URL Type "workspace:": workspace:*

Manually adding the packages that failed to install works seems to fix the problem but I have not yet checked if there are some additional required steps after the part that fails.

Could shadcn-ui emit a warning along with a list of packages to manually install instead of Command failed with exit code 1?

[billymcintosh]

This issue also exists using yarn v4/berry and turborepo.

yarn dlx shadcn-ui@latest add resizable

⠦ Installing resizable...Command failed with exit code 1: npm install react-resizable-panels
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:^

npm ERR! A complete log of this run can be found in: <path>

It appears that the add command is not respecting the package manager that called the script and defaulting to npm install.

[JulianKingman]

This should be open I think? Same failure on initialization

[johnmpotter]

For anyone looking for a quick solution, 0.8.0 worked for me (0.9.0 and higher did not).

pnpm dlx [email protected] add alert-dialog

[vrepsys]

If you're using pnpm check that you don't have a package-lock.json or yarn.lock in your project. Delete them, because they're used by npm/yarn and get shadcn cli confused.

rm package-lock.json
rm yarn.lock

[hanbao-dev]

same issue with bun workspace

bunx --bun shadcn@latest add breadcrumb

Command failed with exit code 1: npm install @radix-ui/react-slot npm error code EUNSUPPORTEDPROTOCOL npm error Unsupported URL Type "workspace:": workspace:*

[donpark]

No 3rd-party package lock file present in my case.

[JulianKingman]

btw, an ugly workaround is to delete the workspace package from package.json, install the shadcn package you want, then add the workspace package back in.

[hanbao-dev]

btw, an ugly workaround is to delete the workspace package from package.json, install the shadcn package you want, then add the workspace package back in.

Unfortunately this is the only thing I can do as well to get past it. But you can install all at once

[mikebuilds]

For anyone looking for a quick solution, 0.8.0 worked for me (0.9.0 and higher did not).

pnpm dlx [email protected] add alert-dialog

Same issue. this worked for me.

[coderomm]

Faced same issue and tried almos all solutions listed above but only this worked for me -

step1: remove workspaces from package.json step2: add shadcn step3: opposite of step1

[miloudi9]

looks like it's fixed now, no workaround.

if it still doesn't work you can try changing how you reference the workspace dependency to use relative path

{
  "dependencies": {
    "my-dependency": "workspace:../my-dependency/"
  }
}