build-storybook not exiting once finished for React

See original GitHub issue

Note: This was probably a self-imposed bug due to a bad webpack config in our ./storybook directory. Issue has been closed.

Describe the bug When running build-storybook from a react app, it does not exit after the build completes. I believe you need to implement the following fix https://github.com/storybookjs/storybook/commit/9389325c80373d9cd96c2845d39e0b46ba2a7b16 so that the command will exit correctly for react storybook. (This should be implemented for all other languages, the original fix was committed only for angular for some reason…) Otherwise, the build-storybook command stops after the info => Output directory: step and hangs there. This blocks a lot of processes, such as Chromatic, that utilize this command.

To Reproduce Run build-storybook with the latest storybook packages in a react app and witness the script not exiting once completed. It is easy to see via the below code snippet that there is no way for the buildStatic method to exit without the code within the “**”, and will therefore continue the build-storybook command running indefinitely until killed by another process.

System The command build-storybook will not exit after reaching the output of info => Output directory: x/y/z

Additional context You can circumvent this locally by adding process.exit(0) to the buildStatic method in node_modules/@storybook/core-server/dist/cjs/build-static.js

async function buildStatic(_ref2) {
  var packageJson = _ref2.packageJson,
      loadOptions = _objectWithoutProperties(_ref2, ["packageJson"]);

  var cliOptions = (0, _cli.getProdCli)(packageJson);

  try {
    await buildStaticStandalone(_objectSpread(_objectSpread(_objectSpread({}, cliOptions), loadOptions), {}, {
      packageJson: packageJson,
      configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
      outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
      ignorePreview: (!!loadOptions.ignorePreview || !!cliOptions.previewUrl) && !cliOptions.forceBuildPreview,
      docsMode: !!cliOptions.docs,
      configType: 'PRODUCTION',
      cache: _coreCommon.cache
    }));
    **process.exit(0);**
  } catch (e) {
    _nodeLogger.logger.error(e);

    process.exit(1);
  }
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:9
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
bebrawcommented, Nov 19, 2021

@npasqua-ebsco To debug the issue, I would need something I can run locally. Otherwise we’ll waste each other’s time here as it’s going to be hard for me to come up with an example that hangs the same way.

0reactions
npasqua-ebscocommented, Nov 22, 2021

Just as a final statement: It was not our webpack config. We were using the “@storybook/preset-create-react-app” addon ended up running our application in the background using the “main” entry point defined in the package.json - therefore our application was running and not allowing the build-storybook command to exit. By removing this, we were able to see the build-storybook command exit and our application did not run. We are trying to explore ways to ensure that the application does not get run via the “main” entry point in the package.json.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CLI options
Storybook comes with two CLI utilities: start-storybook and build-storybook . Storybook collects completely anonymous data to help us improve user ...
Read more >
How To Build a UI Component with React and Storybook
out directory when the build is complete. Go ahead and run the command: npm run build-storybook. Copy.
Read more >
Storybook for React
Visual testing for Storybook for React. ... These docs are for version 1, which is no longer officially supported. ... After you've setup...
Read more >
reactjs - Chromatic CLI not building storybook
build-storybook.log ✓ Publish complete in 16 seconds → View your ... appId=5fc......0c1&number=7 ✓ Build 7 failed after 10 seconds.
Read more >
Creating a React Component Library using Rollup, Typescript ...
Up until now, we had no shared style-sheets or components. Components across projects were created from scratch, rewritten or copy pasted over ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found