Closed mhairston closed 2 months ago
shilman
commented
3 months ago I tried to reproduce using your instructions but everything worked on my machine. Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏
mhairston
commented
3 months ago @shilman The STR above walks through creating the project. There is literally nothing in it except npm & vite boilerplate.
github-actions[bot]
commented
2 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
2 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.
walter0331
commented
1 month ago HI @shilman I'm also facing this issue when I try to install storybook in a new project today (node: 20, react)
npx storybook@latest init in empty foldershilman
commented
1 month ago @walter0331 Can you please share the results of running npx storybook@latest info in your project?
walter0331
commented
1 month ago @walter0331 Can you please share the results of running
npx storybook@latest infoin your project?
@shilman here is the output:
System:
OS: macOS 14.5
CPU: (12) arm64 Apple M3 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm <----- active
pnpm: 9.7.0 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Browsers:
Chrome: 127.0.6533.89
Safari: 17.5
npmPackages:
@storybook/addon-essentials: ^8.2.7 => 8.2.7
@storybook/addon-interactions: ^8.2.7 => 8.2.7
@storybook/addon-links: ^8.2.7 => 8.2.7
@storybook/addon-onboarding: ^8.2.7 => 8.2.7
@storybook/blocks: ^8.2.7 => 8.2.7
@storybook/preset-create-react-app: ^8.2.7 => 8.2.7
@storybook/react: ^8.2.7 => 8.2.7
@storybook/react-webpack5: ^8.2.7 => 8.2.7
@storybook/test: ^8.2.7 => 8.2.7
eslint-plugin-storybook: ^0.8.0 => 0.8.0
storybook: ^8.2.7 => 8.2.7 project setup:
➜ npx create-react-app --template typescript
➜ npx storybook@latest init
output:
╭──────────────────────────────────────────────────────╮
│ │
│ Adding Storybook version 8.2.7 to your project.. │
│ │
╰──────────────────────────────────────────────────────╯
• Detecting project type. ✓
Installing dependencies...
up to date, audited 1521 packages in 2s
261 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
• Adding Storybook support to your "Create React App" based project
✔ Getting the correct version of 13 packages
Configuring eslint-plugin-storybook in your package.json
✔ Installing Storybook dependencies
. ✓
Installing dependencies...
up to date, audited 1989 packages in 2s
340 packages are looking for funding
run `npm fund` for details
9 vulnerabilities (3 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook was successfully installed in your project! 🎉 │
│ To run Storybook manually, run npm run storybook. CTRL+C to stop. │
│ │
│ Wanna know more about Storybook? Check out https://storybook.js.org/ │
│ Having trouble or want to chat? Join us at https://discord.gg/storybook/ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Running Storybook
> react-interview-questions@0.1.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet
storybook v8.2.7
info => Serving static files from ././public at /
info => Starting manager..
✘ [ERROR] Could not resolve "@storybook/addon-viewport/manager"
node_modules/@storybook/addon-essentials/dist/viewport/manager.js:1:14:
1 │ export * from '@storybook/addon-viewport/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-viewport" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-viewport/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-outline/manager"
node_modules/@storybook/addon-essentials/dist/outline/manager.js:1:14:
1 │ export * from '@storybook/addon-outline/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-outline" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-outline/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-actions/manager"
node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14:
1 │ export * from '@storybook/addon-actions/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-actions" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-actions/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-controls/manager"
node_modules/@storybook/addon-essentials/dist/controls/manager.js:1:14:
1 │ export * from '@storybook/addon-controls/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-controls" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-controls/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-measure/manager"
node_modules/@storybook/addon-essentials/dist/measure/manager.js:1:14:
1 │ export * from '@storybook/addon-measure/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-measure" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-measure/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "storybook/internal/core-events"
node_modules/@storybook/addon-onboarding/dist/manager.js:4:32:
4 │ import { STORY_SPECIFIED } from 'storybook/internal/core-events';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "storybook/internal/core-events" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-toolbars/manager"
node_modules/@storybook/addon-essentials/dist/toolbars/manager.js:1:14:
1 │ export * from '@storybook/addon-toolbars/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-toolbars" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-toolbars/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-backgrounds/manager"
node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14:
1 │ export * from '@storybook/addon-backgrounds/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-backgrounds" here because it's
not listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-backgrounds/manager" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/instrumenter"
node_modules/@storybook/addon-interactions/dist/manager.js:5:35:
5 │ import { CallStates, EVENTS } from '@storybook/instrumenter';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/instrumenter" here because it's not
listed as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/instrumenter" as external to exclude it from the bundle, which
will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/global"
node_modules/@storybook/addon-interactions/dist/manager.js:6:23:
6 │ import { global } from '@storybook/global';
╵ ~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "@storybook/global" here because it's not listed
as a dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/global" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "storybook/internal/core-events"
node_modules/@storybook/addon-interactions/dist/manager.js:7:144:
7 │ import { STORY_RENDER_PHASE_CHANGED, STORY_THREW_EXCEPTION, PLAY_FUNCTION_THREW_EXCEPTION, UNHANDLED_ERRORS_WHILE_PLAYING, FORCE_REMOUNT } from 'storybook/internal/core-events';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "storybook/internal/core-events" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "polished"
node_modules/@storybook/addon-interactions/dist/manager.js:9:31:
9 │ import { transparentize } from 'polished';
╵ ~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "polished" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "polished" as external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "storybook/internal/core-events"
node_modules/@storybook/addon-onboarding/dist/Onboarding-HXJGOQAD.js:2:36:
2 │ import { SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "storybook/internal/core-events" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "react-confetti"
node_modules/@storybook/addon-onboarding/dist/Onboarding-HXJGOQAD.js:9:26:
9 │ import ReactConfetti from 'react-confetti';
╵ ~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "react-confetti" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "react-confetti" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "filesize"
node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25:
7 │ import { filesize } from 'filesize';
╵ ~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "filesize" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "filesize" as external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "react-confetti"
node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15:
10 │ import s8 from 'react-confetti';
╵ ~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "react-confetti" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "react-confetti" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "strip-ansi"
node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15:
11 │ import b8 from 'strip-ansi';
╵ ~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "strip-ansi" here because it's not listed as a
dependency of this package:
../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "strip-ansi" as external to exclude it from the bundle, which will remove
this error and leave the unresolved path in the bundle.
Error: Build failed with 17 errors:
node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25: ERROR: Could not resolve "filesize"
node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15: ERROR: Could not resolve "react-confetti"
node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15: ERROR: Could not resolve "strip-ansi"
node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager"
node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-backgrounds/manager"
...
at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1472:15)
at ./node_modules/esbuild/lib/main.js:945:25
at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1315:45)
at buildResponseToResult (./node_modules/esbuild/lib/main.js:943:7)
at ./node_modules/esbuild/lib/main.js:970:16
at responseCallbacks.<computed> (./node_modules/esbuild/lib/main.js:622:9)
at handleIncomingPacket (./node_modules/esbuild/lib/main.js:677:12)
at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:600:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:545:12)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
✔ Would you like to help improve Storybook by sending anonymous crash reports? … no
Describe the bug
Installing storybook installs, automatically runs, then fails with 11 errors.
Reproduction link
no link
Reproduction steps
System
Additional context
After installation, automatically runs storybook, displays:
(node:4155) [DEP0040] DeprecationWarning: The
punycodemodule is deprecated. Please use a userland alternative instead. (Usenode --trace-deprecation ...to show where the warning was created) info ==> Starting manager..x Error: Build failed with 11 errors: node_modules/@chromatic-com/storybook/dist/manager.mjs:9:15: ERROR: Could not resolve "react-confetti" node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15: ERROR: Could not resolve "strip-ansi" node_modules/@chromatic-com/storybook/dist/manager.mjs:11:25: ERROR: Could not resolve "filesize" node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager" node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-backgrounds/manager"