storybook: Storybook webpack builds hide errors by default and don't handle failure

Describe the bug

When building the storybook, webpack shows the progress and can hang due to an error. However, there are no clues to what this error is and no handling of the error.

For example:

odules/prettier/standalone.js as it exceeds the max of 500KB.
15% building 1/11 entries 775/797 dependencies 58/283 modules^C

Here it will proceed incrementing the numbers until it reaches that point, then it never proceeds or exits. There are no error messages, no logs, no warnings. This happens across many versions of Storybook 6.x and has happened on both Webpack 5 and Webpack 4 over the span of many months. I’ve also heard this happen from friends who use independent unrelated stacks that also use Storybook, and they too are none the wiser.

Looking up debugging steps for this issue reveals people who accidentally fixed their webpack issue and storybook started working again, but no debugging steps, no error logs, no methods for diagnosing the issue.

To Reproduce

Unknown at this time, sometimes it will randomly happen to us in CI but not locally, and a rebuild will make it proceed without problems, only to happen again several hours/days later.

System

❯ npx sb@next info                                                                           
Need to install the following packages:
  sb@next
Ok to proceed? (y) y
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    npm: 7.24.2 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.2
  npmPackages:
    @storybook/addon-a11y: ^6.4.9 => 6.4.9 
    @storybook/addon-actions: ^6.4.9 => 6.4.9 
    @storybook/addon-essentials: ^6.4.9 => 6.4.9 
    @storybook/addon-links: ^6.4.9 => 6.4.9 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-storyshots: ^6.4.9 => 6.4.9 
    @storybook/addons: ^6.4.9 => 6.4.9 
    @storybook/builder-webpack5: 6.4.9 => 6.4.9 
    @storybook/manager-webpack5: 6.4.9 => 6.4.9 
    @storybook/react: ^6.4.9 => 6.4.9

This has also happened on multiple Intel Macs, MacOS 11, Circle CI running an ubuntu image, an AWS build server, under Storybook 6.3, 6.2, etc.

Additional context

How do you debug this? I’m not interested in solving my specific case if it means I’m just as lost when another issue crops up in 6 months time and there’s no debugging or troubleshooting steps.

Also, how do I use the webpack config dump if half the entries are like this: dirxml: [Function: dirxml],

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 19 (4 by maintainers)

Most upvoted comments

@shilman I think you’ve missed the point, I’m sure I could eventually find out the specific thing causing my specific problem, that would be great for me this one time, but useless to everybody else.

This is not a user support issue, this is a bug report.

This issue is not about me and my specific problem on my project, it’s about you and storybook just “hanging” frozen..

I am reporting a bug in Storybooks error handling mechanism.

This is the issue:

When a webpack build fails, Storybook hangs and shows no useful information
There is no documentation acknowledging this can occur or what to do
There are no logs detailing what happened
Sometimes the issue is non-deterministic, making it even more difficult to guess what the error is
Storybook should just hand you the error in the CLI output, but it does not.

tomjn on Dec 27, 2021

I’m having a similar issue. start-storybook hangs without an error message or a status update. Adding stats: "verbose" to the webpack config and --loglevel silly to the command doesn’t change the output.

UPDATE

I know this issue is more generally around error reporting during build. However, in case someone else stumbles on this specific issue, I resolved it by doing the following:

Comment out everything from .storybook/main.js that wasn’t needed (all addons, plugins, etc).
Remove .storybook/preview.js
At this point, I finally got an error message that babel-plugin-react-require couldn’t be found.
I added babel-plugin-react-require as a dep, restored preview.js and reverted all my main.js changes and the build started working.

cullylarson on Nov 15, 2022

@CWSites no, that’s a separate unrelated issue, if you were having this issue you would never have gotten to the point where it could load in the browser, and it would not have crashed.

This issue is for when a build is frozen with no error messages while building dependencies, and has to be manually stopped by user interaction, either via cmd+c in the terminal, or by killing the node process.

You should create a new issue, or find the relevant issue for this problem

tomjn on Jan 7, 2022

I also cannot give you a reproduction repo because I do not know the cause of my problem, and I have no mechanisms, no debugging steps, no logs, no error reporting, nothing, absolutely nothing I can use to diagnose or debug this issue. That is the bug. Storybook should have printed the error, it does not, it does nothing, it just hangs with no explanation.

tomjn on Dec 27, 2021