Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Installing Storybook via Yarn latest leads to error #29374

Open
kerryj89 opened this issue Oct 16, 2024 · 0 comments
Open

[Bug]: Installing Storybook via Yarn latest leads to error #29374

kerryj89 opened this issue Oct 16, 2024 · 0 comments
Labels
bug needs triage

Comments

@kerryj89
Copy link

kerryj89 commented Oct 16, 2024 •
edited
Loading

Describe the bug

Installing via Yarn (4.5.0 in this case) leads to error (chose React and Vite, don't know if other setups cause the same issue). Storybook starts up with error but no content shows up. See "Additional context".

Reproduction link

n/a

Reproduction steps

  1. npm init to create dummy package.json
  2. Follow instruction for Yarn at https://storybook.js.org/docs/get-started/install: yarn dlx storybook@latest init ← Note: You need Yarn >1 to run dlx and nodeLinker: node-modules inside .yarnrc.yml to install to node_modules directory
  3. Answer all questions
  4. Get warning: (node:13206) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
  5. Get error: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from ./node_modules/@storybook/builder-vite/dist/index.js

Installing via NPM npx storybook@latest init works, however (with punycode warning).

System

Storybook Environment Info:

  System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 4.5.0 - ~/.nvm/versions/node/v22.9.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm <----- active
  Browsers:
    Chrome: 129.0.6668.101
    Safari: 18.0
  npmPackages:
    @storybook/addon-essentials: ^8.3.5 => 8.3.5 
    @storybook/addon-interactions: ^8.3.5 => 8.3.5 
    @storybook/addon-links: ^8.3.5 => 8.3.5 
    @storybook/addon-onboarding: ^8.3.5 => 8.3.5 
    @storybook/blocks: ^8.3.5 => 8.3.5 
    @storybook/react: ^8.3.5 => 8.3.5 
    @storybook/react-vite: ^8.3.5 => 8.3.5 
    @storybook/test: ^8.3.5 => 8.3.5 
    storybook: ^8.3.5 => 8.3.5

Additional context

kj@my-mbp sb-demo % yarn dlx storybook@latest init
➤ YN0000: · Yarn 4.5.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + storybook@npm:8.3.5, @esbuild/aix-ppc64@npm:0.23.1, @esbuild/android-arm64@npm:0.23.1, and 131 more.
➤ YN0000: └ Completed in 0s 662ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 111 packages were added to the project (+ 48.35 MiB).
➤ YN0000: └ Completed in 0s 333ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.23.1 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 880ms
➤ YN0000: · Done with warnings in 1s 892ms

╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.3.5 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...

➤ YN0000: · Yarn 4.5.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 44ms
    We couldn't detect your project type. (code: UNDETECTED)
    You can specify a project type explicitly via `storybook init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install

✔ Do you want to manually choose a Storybook project type to install? … yes
✔ Please choose a project type from the following list: › react
✔ 
We were not able to detect the right builder for your project. Please select one: › Vite

  ✔ Getting the correct version of 11 packages
  ✔ Installing Storybook dependencies
(node:12784) Warning: [Warning] The runtime detected new information in a PnP file; reloading the API instance (/Users/kjohnson/Desktop/sb-demo/.pnp.cjs)
(Use `node --trace-warnings ...` to show where the warning was created)
. ✓
Installing dependencies...

➤ YN0000: · Yarn 4.5.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ sb-demo@workspace:. doesn't provide react (p66b9d), requested by @storybook/addon-links and other dependencies.
➤ YN0002: │ sb-demo@workspace:. doesn't provide react-dom (pfed50), requested by @storybook/blocks and other dependencies.
➤ YN0002: │ sb-demo@workspace:. doesn't provide vite (p9832e), requested by @storybook/react-vite.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 211ms
➤ YN0000: ┌ Link step
➤ YN0031: │ One or more node_modules have been detected and will be removed. This operation may take some time.
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 0s 328ms

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 yarn 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
@storybook/core v8.3.5

(node:12838) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
=> Failed to build the preview
Error: @storybook/builder-vite tried to access vite (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: vite (via "vite/package.json")
Required by: @storybook/builder-vite@virtual:3fd42c61ee445ba2474bf2d74e4f838fb27b6e801c81132c31d97ff317d0f961eaed92f0ac32b0c00decba5f617c5e9ac731bc504f917d76c10cd5646893fee6#npm:8.3.5 (via ./.yarn/__virtual__/@storybook-builder-vite-virtual-e2abc65a75/3/.yarn/berry/cache/@storybook-builder-vite-npm-8.3.5-01c4947b43-10c0.zip/node_modules/@storybook/builder-vite/dist/index.js)
Ancestor breaking the chain: sb-demo@workspace:.


    at makeError (./.pnp.cjs:10127:34)
    at resolveToUnqualified (./.pnp.cjs:11704:21)
    at Object.resolveToUnqualified (./.pnp.cjs:11945:26)
    at resolve$1 (file://./.pnp.loader.mjs:2031:31)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:199:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:816:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

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
kj@my-mbp sb-demo % 
kj@my-mbp sb-demo % yarn storybook    
@storybook/core v8.3.5

(node:13206) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Starting manager..
info => Starting preview..
=> Failed to build the preview
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from ./node_modules/@storybook/builder-vite/dist/index.js
    at packageResolve (node:internal/modules/esm/resolve:839:9)
    at moduleResolve (node:internal/modules/esm/resolve:908:18)
    at defaultResolve (node:internal/modules/esm/resolve:1038:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
    at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:36)
    at TracingChannel.tracePromise (node:diagnostics_channel:337:14)
    at ModuleLoader.import (node:internal/modules/esm/loader:481:21)
    at defaultImportModuleDynamicallyForScript (node:internal/modules/esm/utils:227:31)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

kj@my-mbp sb-demo % ls -l node_modules/@storybook 
total 0
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-actions
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-backgrounds
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 addon-controls
drwxr-xr-x  15 kj  staff  480 Oct 16 08:44 addon-docs
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 addon-essentials
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 addon-highlight
drwxr-xr-x   8 kj  staff  256 Oct 16 08:44 addon-interactions
drwxr-xr-x   9 kj  staff  288 Oct 16 08:44 addon-links
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-measure
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-onboarding
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-outline
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 addon-toolbars
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 addon-viewport
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 blocks
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 builder-vite
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 components
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 core
drwxr-xr-x   7 kj  staff  224 Oct 16 08:44 csf
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 csf-plugin
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 global
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 icons
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 instrumenter
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 manager-api
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 preview-api
drwxr-xr-x   8 kj  staff  256 Oct 16 08:44 react
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 react-dom-shim
drwxr-xr-x   6 kj  staff  192 Oct 16 08:44 react-vite
drwxr-xr-x   5 kj  staff  160 Oct 16 08:44 test
drwxr-xr-x   9 kj  staff  288 Oct 16 08:44 theming

kj@my-mbp sb-demo % ls -l node_modules/@storybook/builder-vite/dist
total 544
-rw-r--r--  1 kj  staff    1226 Oct 16 08:44 index.d.ts
-rw-r--r--  1 kj  staff  135523 Oct 16 08:44 index.js
-rw-r--r--  1 kj  staff  134023 Oct 16 08:44 index.mjs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kerryj89