storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.22k stars 9.26k forks source link

[Bug]: Error installing storybook in monorepo #20726

Closed osvaldokalvaitir closed 2 months ago

osvaldokalvaitir commented 1 year ago

Describe the bug

Error installing storybook in monorepo

Node - v18.13.0

NPM - 9.3.1

When running the command:

npx storybook init

or

npx storybook init --builder @storybook/builder-vite --type react --use-npm

this error occurs:

errro

To Reproduce

No response

System

No response

Additional context

No response

cngJo commented 1 year ago

Same issues with node v19.3.0. I tried to install storybook with vuejs 3 in a separate repository to import components from different other packages in the same workspace.

Tested with the latest storybook 6.5 as well as 7.0.0-beta.31.

osvaldokalvaitir commented 1 year ago

I was able to perform the process on Node v16.15.0

cngJo commented 1 year ago

What have you done to get this working?

I have the following NPM workspace setup for my monorepo:

. 
./assets/apps/mc-storybook
./asstes/apps/mc-web
./assets/packages/component-library
./assets/packages/other-lib

where both assets/packages/* and assets/apps/* are defined as workspaces:

"workspaces": [
  "assets/packages/*",
  "assets/apps/*"
]

I've then create a new vuejs3 app in the ./assets/apps/storybook directory and ran npx storybook init --builder @storybook/builder-vite --type vue3 --use-npm which crashed with the error you originally posted.

Looking at the debug logs, this seems to be related to storybook calling the command:config command which is not supported by workspace:

Quote form the docs:

Note: This command is unaware of workspaces.

Are you doing sth. different than what I've described?


Complete npm log file (with a censored path)
0 verbose cli /usr/local/Cellar/node/19.3.0/bin/node /usr/local/bin/npm
1 info using npm@9.3.1
2 info using node@v19.3.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 info found workspace root at /Users/johannes/Programming/organisation/SaaS/project/project
10 timing config:load:file:/Users/johannes/Programming/organisation/SaaS/project/project/.npmrc Completed in 0ms
11 timing config:load:project Completed in 10ms
12 timing config:load:file:/Users/johannes/.npmrc Completed in 1ms
13 timing config:load:user Completed in 1ms
14 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
15 timing config:load:global Completed in 0ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 18ms
18 timing npm:load:configload Completed in 18ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 0ms
21 verbose title npm config get legacy-peer-deps
22 verbose argv "config" "get" "legacy-peer-deps" "--location" "project"
23 timing npm:load:setTitle Completed in 2ms
24 timing config:load:flatten Completed in 2ms
25 timing npm:load:display Completed in 4ms
26 verbose logfile logs-max:10 dir:/Users/johannes/.npm/_logs/2023-01-23T19_51_39_486Z-
27 verbose logfile /Users/johannes/.npm/_logs/2023-01-23T19_51_39_486Z-debug-0.log
28 timing npm:load:logFile Completed in 13ms
29 timing npm:load:timers Completed in 0ms
30 timing npm:load:configScope Completed in 0ms
31 timing npm:load Completed in 38ms
32 timing command:config Completed in 2ms
33 verbose stack Error: This command does not support workspaces.
33 verbose stack     at Config.cmdExec (/usr/local/lib/node_modules/npm/lib/base-command.js:123:29)
33 verbose stack     at Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:154:20)
33 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli.js:134:5)
34 verbose cwd /Users/johannes/Programming/organisation/SaaS/project/project/assets/apps/mc-storybook
35 verbose Darwin 22.2.0
36 verbose node v19.3.0
37 verbose npm  v9.3.1
38 error code ENOWORKSPACES
39 error This command does not support workspaces.
40 verbose exit 1
41 timing npm Completed in 50ms
42 verbose code 1
43 error A complete log of this run can be found in:
43 error     /Users/johannes/.npm/_logs/2023-01-23T19_51_39_486Z-debug-0.log
osvaldokalvaitir commented 1 year ago

What have you done to get this working?

I have the following NPM workspace setup for my monorepo:

. 
./assets/apps/mc-storybook
./asstes/apps/mc-web
./assets/packages/component-library
./assets/packages/other-lib

where both assets/packages/* and assets/apps/* are defined as workspaces:

"workspaces": [
  "assets/packages/*",
  "assets/apps/*"
]

I've then create a new vuejs3 app in the ./assets/apps/storybook directory and ran npx storybook init --builder @storybook/builder-vite --type vue3 --use-npm which crashed with the error you originally posted.

Looking at the debug logs, this seems to be related to storybook calling the command:config command which is not supported by workspace:

Quote form the docs:

Note: This command is unaware of workspaces.

Are you doing sth. different than what I've described?

Complete npm log file (with a censored path)

I only changed the version of Node.js

My package.json:

{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}
ghost commented 1 year ago

I can normal install this lib, always when i want use sb i must fixed 10 errors

wtf?

same error.... i think is npm version

danleyden commented 1 year ago

Hit this issue also with Node v19.6.0

It worked correctly after downgrading to Node v16.19.0

sgpicone commented 1 year ago

Also hit this issue, with Node v19.6.0, 19.5.0, 18.14.0

Downgrading to Node v16.19.0 resolved the problem but is definitely not ideal

clearly-outsane commented 1 year ago
npm ERR! This command does not support workspaces.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2023-02-24T14_41_14_696Z-debug-0.log

Same. With npm v18

AFusco commented 1 year ago

getting the same error, following the turborepo guide at https://turbo.build/repo/docs/handbook/tools/storybook, on node 16.19.1

idoialongan commented 1 year ago

An error occurred while installing dependencies. npm ERR! code ENOWORKSPACES npm ERR! This command does not support workspaces.

Same error with Node v18.14.2 and npm 9.6.0

davecarlson commented 1 year ago

Think this is a turborepo / npm bug, not storybook.

I have the same issue, and i dont have storybook installed.

npm 9.50 turbo 1.83 node v18.50.0

joepetrillo commented 1 year ago

I am getting the same error while using turborepo with npm and nextjs. My dependencies are installing but when I start the dev server I see the following.

image
0 verbose cli /Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/bin/node /Users/jpetrillo/Library/Caches/fnm_multishells/12304_1678801214413/bin/npm
1 info using npm@9.6.1
2 info using node@v18.15.0
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 0ms
5 timing config:load:file:/Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/lib/node_modules/npm/npmrc Completed in 0ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 0ms
8 timing config:load:env Completed in 1ms
9 info found workspace root at /Users/jpetrillo/Documents/Projects/with-npm
10 timing config:load:file:/Users/jpetrillo/Documents/Projects/with-npm/.npmrc Completed in 0ms
11 timing config:load:project Completed in 3ms
12 timing config:load:file:/Users/jpetrillo/.npmrc Completed in 0ms
13 timing config:load:user Completed in 0ms
14 timing config:load:file:/Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/etc/npmrc Completed in 0ms
15 timing config:load:global Completed in 0ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 6ms
18 timing npm:load:configload Completed in 6ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 0ms
21 verbose title npm config get registry
22 verbose argv "config" "get" "registry"
23 timing npm:load:setTitle Completed in 5ms
24 timing config:load:flatten Completed in 2ms
25 timing npm:load:display Completed in 2ms
26 verbose logfile logs-max:10 dir:/Users/jpetrillo/.npm/_logs/2023-03-14T13_40_45_696Z-
27 verbose logfile /Users/jpetrillo/.npm/_logs/2023-03-14T13_40_45_696Z-debug-0.log
28 timing npm:load:logFile Completed in 2ms
29 timing npm:load:timers Completed in 0ms
30 timing npm:load:configScope Completed in 0ms
31 timing npm:load Completed in 16ms
32 timing command:config Completed in 1ms
33 verbose stack Error: This command does not support workspaces.
33 verbose stack     at Config.cmdExec (/Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/lib/node_modules/npm/lib/base-command.js:123:29)
33 verbose stack     at Npm.exec (/Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/lib/node_modules/npm/lib/npm.js:154:20)
33 verbose stack     at async module.exports (/Users/jpetrillo/Library/Application Support/fnm/node-versions/v18.15.0/installation/lib/node_modules/npm/lib/cli.js:134:5)
34 verbose cwd /Users/jpetrillo/Documents/Projects/with-npm/apps/latest
35 verbose Darwin 22.2.0
36 verbose node v18.15.0
37 verbose npm  v9.6.1
38 error code ENOWORKSPACES
39 error This command does not support workspaces.
40 verbose exit 1
41 timing npm Completed in 22ms
42 verbose code 1
43 error A complete log of this run can be found in:
43 error     /Users/jpetrillo/.npm/_logs/2023-03-14T13_40_45_696Z-debug-0.log

node 18.15.0 npm 9.6.1 turborepo 1.8.3 nextjs 13.2.4

RodrigoNovais commented 1 year ago

Having the same issue I see it was tagged with "has workaround", I hope the workaround is not "use a no longer manteined version of node" cause I don't see any

dolgachio commented 7 months ago

I also faced this issue with Turborepo and React. So, it remains. I want to contribute to fixing it if contributors think it makes sense.

node v18.19.0
npm v10.2.3
turbo v1.11.3
aewshyae commented 7 months ago

FYI same error in nextjs. https://github.com/vercel/next.js/issues/47121#issuecomment-1499044345

I hope it may help

valentinpalkovic commented 7 months ago

Can someone provide a minimal reproduction? https://storybook.new

dolgachio commented 7 months ago

@valentinpalkovic thank you for your response, so to reproduce it, do you need some examples on StackBlitz or some similar platform?

valentinpalkovic commented 7 months ago

You can also just provide a GitHub Repo with the minimal reproduction.

github-actions[bot] commented 7 months ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

github-actions[bot] commented 6 months ago

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists โ€“ we're always happy to help. Thanks so much for your understanding.

osvaldokalvaitir commented 6 months ago

not yet resolved

greptile-apps[bot] commented 3 months ago

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue of installing Storybook in a monorepo, follow these steps:

  1. Ensure you are using the correct package manager commands for your setup. Refer to the following snippets for guidance:
  1. If you need to specify a custom package manager, use the following commands:

    npx storybook@latest init --package-manager=npm
    pnpm dlx storybook@latest init --package-manager=npm
    yarn dlx storybook@latest init --package-manager=npm

    Source: /docs/_snippets/init-command-custom-package-manager.md

  2. For Vite builder and React setup, ensure you have the necessary dependencies:

    npm install @storybook/builder-vite --save-dev
    pnpm add --save-dev @storybook/builder-vite
    yarn add --dev @storybook/builder-vite

    Source: /docs/_snippets/storybook-vite-builder-install.md

    npm install --save-dev @storybook/react-vite
    pnpm add --save-dev @storybook/react-vite
    yarn add --dev @storybook/react-vite

    Source: /docs/_snippets/react-vite-install.md

  3. Install essential addons if needed:

    npm install @storybook/addon-essentials --save-dev
    pnpm add --save-dev @storybook/addon-essentials
    yarn add --dev @storybook/addon-essentials

    Source: /docs/_snippets/storybook-addon-essentials-install.md

These steps should help address the installation issues in a monorepo environment.

References

/docs/_snippets/init-command.md /docs/_snippets/storybook-init-v7.md /docs/_snippets/init-command-custom-package-manager.md /docs/_snippets/storybook-vite-builder-install.md /docs/_snippets/react-vite-install.md /docs/_snippets/storybook-addon-essentials-install.md

#### About Greptile This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a ๐Ÿ‘ if this is helpful and ๐Ÿ‘Ž if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) ยท [Edit Issue Bot Settings](https://app.greptile.com/apps/github)
valentinpalkovic commented 3 months ago

Reproduction:

  1. git clone https://github.com/kinetics-dev/kinetics.git
  2. cd ./packages/kinetics-core
  3. npx storybook@latest init

Error message:

Error: Command failed with exit code 1: npm config get registry
npm error code ENOWORKSPACES
npm error This command does not support workspaces.

npm error A complete log of this run can be found in: /-/.npm/_logs/2024-07-15T12_18_11_132Z-debug-0.log
    at makeError (/-/.npm/_npx/842836d16bfc19ab/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/-/.npm/_npx/842836d16bfc19ab/node_modules/execa/index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Yarn2Proxy.executeCommand (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/core-common/dist/index.js:1667:11)
    at async Yarn2Proxy.getRegistryURL (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/core-common/dist/index.js:1376:7)
    at async resolveUsingBranchInstall (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:2066:17)
    at async getRendererDir (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:2094:12)
    at async templatePath (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:2185:21)
    at async copyTemplateFiles (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:2228:40)
    at async baseGenerator (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:2995:5)
    at installStorybook (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:3856:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async installStorybook (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:3849:14)
    at async doInitiate (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:3993:23)
    at async withTelemetry (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/core-server/dist/index.js:40:3599)
    at async initiate (/-/.npm/_npx/842836d16bfc19ab/node_modules/@storybook/cli/dist/generate.js:4078:24)
valentinpalkovic commented 3 months ago

@vanessayuenn, Can we add this to the empathy backlog? I was finally stumbling upon a reproduction (see above). Let's fix this quickly because initializing Storybook in projects using npm/yarn workspaces is not working, and workspaces aren't that uncommon nowadays.

valentinpalkovic commented 3 months ago

I'm removing the has workaround label since downgrading to Node.js 16, which reached its EOL, isn't an option anymore.