storybook: Cannot init in a new project

Describe the bug

I am trying to install Storybook in a new project. But when I run npx storybook@latest init, it says “Error: Unable to find versions of @storybook/cli using npm”

To Reproduce

Run npx storybook@latest init

System

Storybook Environment Info:
 
   System:
     OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
     CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
     Shell: 5.1.16 - /bin/bash
   Browsers:
     Chrome: 122.0.6261.128

Additional context

 Error: Unable to find versions of @storybook/cli using npm
     at NPMProxy.runGetVersions (/home/pavitra/.npm/_npx/6fe9a9991b157df1/node_modules/@storybook/core-common/dist/index.js:37:639)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
     at async doInitiate (/home/pavitra/.npm/_npx/6fe9a9991b157df1/node_modules/@storybook/cli/dist/generate.js:146:997)
     at async withTelemetry (/home/pavitra/.npm/_npx/6fe9a9991b157df1/node_modules/@storybook/core-server/dist/index.js:28:3579)
     at async initiate (/home/pavitra/.npm/_npx/6fe9a9991b157df1/node_modules/@storybook/cli/dist/generate.js:180:250)

About this issue

Original URL
State: open
Created 3 months ago
Reactions: 1
Comments: 19 (7 by maintainers)

Most upvoted comments

👋 I am Execa’s co-maintainer.

From the look of it, I do not think there is a bug with Execa there, but the issue at https://github.com/sindresorhus/execa/issues/995 can track this.

In terms of calling Execa in Storybook, I would recommend replacing execaCommand() with execa() instead. execaCommand() is intended for REPL, not programmatic usage. This documentation explains it. The current usage in Storybook might not be escaping arguments properly due to this.

More details: the shell: true option executes the command and its argument as a single string, with the shell interpreting it. The execaCommand() splits the input string into a command and an arguments array using spaces as delimiters. And Storybook joins the command and the arguments array into a string. So right now, this looks this:

runCommand({command: 'npm', arguments: ['install', 'example with space']});
-> execaCommand('npm install example with space', {shell: true});
-> execa('npm', ['install', 'example with space'], {shell: true});
-> child_process.spawn('npm', ['install', 'example with space'], {shell: true});
-> (on Unix) bash -c "npm install example with space"
   (on Windows) cmd /d /s /c "npm install example with space"

As you can see, the execaCommand()'s parsing is not really needed there, and execa() could be called directly instead.

The shell: true option is usually problematic, as it prevents proper escaping (as you see from the above example with spaces, which end up not being quoted), which could look to command injection. However, npm and yarn are weird, and might requires being running in a shell, depending on your case.

https://github.com/storybookjs/storybook/blob/7e1ee32d46075bed700b4ae193e54546b5a9b0e2/code/lib/core-common/src/js-package-manager/JsPackageManager.ts#L566-L574

ehmicky on Apr 29, 2024

@pavitra-infocusp re-opened. so i guess we wait for the resolution in execa? thanks so much for digging in on this. 🙏

shilman on Apr 29, 2024

I think you should npm install @storybook/cli first.

Kenzo-Wada on Mar 18, 2024