Configurable Chromium executable path when extracting stories.json

[ryota-ka]

Is your feature request related to a problem? Please describe

stories.json, which is required for Storybook composition, can be generated through $ npx sb extract.

We sometimes want to use preinstalled Chrome/Chromium by providing its path.
Automatic installation of Chromium works nice in most cases, but we are sometimes faced to the situation it doesn't work well.

sb extract internally utilizes puppeteer-core, which aims for programmatic use and does not respect $PUPPETEER_EXECUTABLE_PATH environment variable by design.
This makes it impossible to use preinstalled Chromium and avoid automatic installation.

Describe the solution you'd like

Add a --chromium-executable-path (or --chrome-executable-path) option to sb extract command.
(AFAIK @storybook/addon-storyshots-puppeteer already offers such a feature to solve the problem, by providing chromeExecutablePath option.)

Describe alternatives you've considered

We may respect $PUPPETEER_EXECUTABLE_PATH environment variable in sb extract, but I don't think it's a good idea.

Or we may switch to puppeteer from puppeteer-core.

Are you able to assist to bring the feature to reality?

Yes.

Additional context

Due to this comment, puppeteer-core is designed not to install Chromium, unlike puppeteer.
If we prefer automatic installation, then we may ought to use puppeteer instead of puppeteer-core.

[crohrer]

I also had the same issue running sb extract in a CI environment. Is there any workaround?

[ryota-ka]

@crohrer Here's my dirty & hacky workaround. Hope it works for you.

$ yarn add -D puppeteer
$ sed -i ./node_modules/@storybook/cli/dist/extract.js -e s/puppeteer-core/puppeteer/

[crohrer]

@ryota-ka Thank you!

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.32 containing PR #15878 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[tfrijsewijk]

I wanted to generate stories.json for a Storybook 7 with storiesOf. So I need to use storybook extract which in turn uses Puppeteer. My library generated modern code that Chromium could not parse (??=).

So I needed a newer Chromium.

I ended up using a resolution in package.json with Yarn:

  "resolutions": {
    "puppeteer-core@^2.1.1": "13.5.2"
  }

puppeteer-core@2.1.1 uses Chromium 80, 13.5.2 uses Chromium 100.

Of course there's a risk that the puppeteer-core's API doesn't match Storybook usage anymore, but I only need it for storybook extract and that's using ancient methods (https://github.com/storybookjs/storybook/blob/6fddbfb859c31ff1707b9543c09986fa6216118f/code/lib/cli/src/extract.ts).