storybookjs / storybook

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

[Bug]: installation with yarn fails #22103

Open herzaso opened 1 year ago

herzaso commented 1 year ago

Describe the bug

running yarn dlx storybook@latest init fails on new vite project.

Steps to reproduce: create a new project with yarn create vite test-storybook --template react-ts cd into the directory and run the command above to init storybook.

The command fails with the following output:

yarn dlx storybook@latest init
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 7s 934ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ electron-to-chromium@npm:1.4.364 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ flow-parser@npm:0.204.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@npm:1.22.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@patch:resolve@npm%3A1.22.3#~builtin<compat/resolve>::version=1.22.3&hash=c3c19d can't be found in the cache and will be fetched 
➤ YN0000: └ Completed in 1s 115ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.17.16 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 85ms
➤ YN0000: Done with warnings in 10s 208ms

 storybook init - the simplest way to add a Storybook to your project. 

(node:3104) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Detecting project type. ✓
    Detected Vite project. Setting builder to Vite
 • Adding Storybook support to your "React" app
npm ERR! code 1
npm ERR! path /Users/ofir/Development/private/test-storybook/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh /var/folders/pm/h3p3r0cn09g7fdbxv7mr04g00000gn/T/postinstall-cd5d5dfc.sh
npm ERR! node:internal/errors:856
npm ERR!   const err = new Error(message);
npm ERR!               ^
npm ERR! 
npm ERR! Error: Command failed: /opt/homebrew/Cellar/node/18.7.0/bin/node /Users/ofir/Development/private/test-storybook/node_modules/esbuild/bin/esbuild --version
npm ERR! node:internal/errors:477
npm ERR!     ErrorCaptureStackTrace(err);
npm ERR!     ^
npm ERR! 
npm ERR! TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /Users/ofir/Development/private/test-storybook/node_modules/esbuild/bin/esbuild
npm ERR!     at new NodeError (node:internal/errors:387:5)
npm ERR!     at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
npm ERR!     at defaultGetFormat (node:internal/modules/esm/get_format:122:38)
npm ERR!     at defaultLoad (node:internal/modules/esm/load:81:20)
npm ERR!     at nextLoad (node:internal/modules/esm/loader:173:28)
npm ERR!     at load$1 (file:///private/var/folders/pm/h3p3r0cn09g7fdbxv7mr04g00000gn/T/xfs-605e6e3f/dlx-3092/.pnp.loader.mjs:1455:12)
npm ERR!     at nextLoad (node:internal/modules/esm/loader:173:28)
npm ERR!     at ESMLoader.load (node:internal/modules/esm/loader:616:26)
npm ERR!     at ESMLoader.moduleProvider (node:internal/modules/esm/loader:472:22)
npm ERR!     at new ModuleJob (node:internal/modules/esm/module_job:63:26) {
npm ERR!   code: 'ERR_UNKNOWN_FILE_EXTENSION'
npm ERR! }
npm ERR! 
npm ERR! Node.js v18.7.0
npm ERR! 
npm ERR!     at checkExecSyncError (node:child_process:851:11)
npm ERR!     at Object.execFileSync (node:child_process:887:15)
npm ERR!     at validateBinaryVersion (/Users/ofir/Development/private/test-storybook/node_modules/esbuild/install.js:98:28)
npm ERR!     at /Users/ofir/Development/private/test-storybook/node_modules/esbuild/install.js:283:5 {
npm ERR!   status: 1,
npm ERR!   signal: null,
npm ERR!   output: [
npm ERR!     null,
npm ERR!     Buffer(0) [Uint8Array] [],
npm ERR!     Buffer(995) [Uint8Array] [
npm ERR!       110, 111, 100, 101,  58, 105, 110, 116, 101, 114, 110,  97,
npm ERR!       108,  47, 101, 114, 114, 111, 114, 115,  58,  52,  55,  55,
npm ERR!        10,  32,  32,  32,  32,  69, 114, 114, 111, 114,  67,  97,
npm ERR!       112, 116, 117, 114, 101,  83, 116,  97,  99, 107,  84, 114,
npm ERR!        97,  99, 101,  40, 101, 114, 114,  41,  59,  10,  32,  32,
npm ERR!        32,  32,  94,  10,  10,  84, 121, 112, 101,  69, 114, 114,
npm ERR!       111, 114,  32,  91,  69,  82,  82,  95,  85,  78,  75,  78,
npm ERR!        79,  87,  78,  95,  70,  73,  76,  69,  95,  69,  88,  84,
npm ERR!        69,  78,  83,  73,
npm ERR!       ... 895 more items
npm ERR!     ]
npm ERR!   ],
npm ERR!   pid: 3228,
npm ERR!   stdout: Buffer(0) [Uint8Array] [],
npm ERR!   stderr: Buffer(995) [Uint8Array] [
npm ERR!     110, 111, 100, 101,  58, 105, 110, 116, 101, 114, 110,  97,
npm ERR!     108,  47, 101, 114, 114, 111, 114, 115,  58,  52,  55,  55,
npm ERR!      10,  32,  32,  32,  32,  69, 114, 114, 111, 114,  67,  97,
npm ERR!     112, 116, 117, 114, 101,  83, 116,  97,  99, 107,  84, 114,
npm ERR!      97,  99, 101,  40, 101, 114, 114,  41,  59,  10,  32,  32,
npm ERR!      32,  32,  94,  10,  10,  84, 121, 112, 101,  69, 114, 114,
npm ERR!     111, 114,  32,  91,  69,  82,  82,  95,  85,  78,  75,  78,
npm ERR!      79,  87,  78,  95,  70,  73,  76,  69,  95,  69,  88,  84,
npm ERR!      69,  78,  83,  73,
npm ERR!     ... 895 more items
npm ERR!   ]
npm ERR! }
npm ERR! 
npm ERR! Node.js v18.7.0

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ofir/.npm/_logs/2023-04-14T20_35_40_269Z-debug-0.log
An error occurred while installing dependencie

To Reproduce

Irrelevant since the installation fails

System

➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 8s 114ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.17.16 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 928ms
➤ YN0000: Done with warnings in 9s 198ms

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.7.0 - /private/var/folders/pm/h3p3r0cn09g7fdbxv7mr04g00000gn/T/xfs-e1e3204c/node
    Yarn: 3.3.1 - /private/var/folders/pm/h3p3r0cn09g7fdbxv7mr04g00000gn/T/xfs-e1e3204c/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.0

Additional context

No response

herzaso commented 1 year ago

with npx it did work:

npx storybook@latest init
Need to install the following packages:
  storybook@7.0.4
Ok to proceed? (y) y

 storybook init - the simplest way to add a Storybook to your project. 

(node:4347) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Detecting project type. ✓
    Detected Vite project. Setting builder to Vite
 • Adding Storybook support to your "React" app

added 923 packages, and audited 924 packages in 34s

156 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
. ✓
 • Preparing to install dependencies. ✓

up to date, audited 924 packages in 857ms

156 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
. ✓
🔎 checking possible migrations..

╭ No migrations were applicable to your project ────────────────────────────────────────────────────────────────────────────────────────────────────╮│                                                                                                                                                   ││   If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                                            ││                                                                                                                                                   ││   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version     ││   of Storybook.                                                                                                                                   ││                                                                                                                                                   ││   Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/migration-guides/7.0        ││   And reach out on Discord if you need help: https://discord.gg/storybook                                                                         ││                                                                                                                                                   │╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

For more information visit: https://storybook.js.org

To run your Storybook, type:

   npm run storybook