Storybook: Module not found error doesn't properly exit during build

[esingletary]

Describe the bug
When building storybook using build-storybook with module resolution errors in an .mdx file, a build error occurs but the build process hangs instead of exiting with a non-zero exit code. This is observed when using @storybook/addons-docs with a story using .mdx with an improper import.

This is problematic for our teams as we run this process during CI/CD pipelines and it hangs our builds if one of our developers makes an error in their .mdx files.

> [email protected] build-storybook M:\scratch\storybook-build-hang
> build-storybook

info @storybook/angular v5.3.18
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (8.11 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
info => Found custom tsconfig.json
info => Using default Webpack setup.
info => Using angular project 'storybook-build-hang' for configuring Storybook.
info => Loading angular-cli config.
info => Get angular-cli webpack config.
info => Compiling preview..
Starting type checking service...
Using 1 worker with 2048MB memory limit
70% building 40/90 modules 50 active M:\scratch\storybook-build-hang\node_modules\core-js\internals\set-to-string-tag.jsERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve './app.componen' in 'M:\scratch\storybook-build-hang\src\app'
(node:39788) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve './app.componen' in 'M:\scratch\storybook-build-hang\src\app'
    at M:\scratch\storybook-build-hang\node_modules\webpack\lib\Compilation.js:925:10
    at M:\scratch\storybook-build-hang\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at M:\scratch\storybook-build-hang\node_modules\webpack\lib\NormalModuleFactory.js:130:21
    at M:\scratch\storybook-build-hang\node_modules\webpack\lib\NormalModuleFactory.js:224:22
    at M:\scratch\storybook-build-hang\node_modules\neo-async\async.js:2830:7
    at M:\scratch\storybook-build-hang\node_modules\neo-async\async.js:6877:13
    at M:\scratch\storybook-build-hang\node_modules\webpack\lib\NormalModuleFactory.js:214:25
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\Resolver.js:213:14
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (M:\scratch\storybook-build-hang\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (M:\scratch\storybook-build-hang\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (M:\scratch\storybook-build-hang\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at M:\scratch\storybook-build-hang\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
(node:39788) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39788) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
70% building 1553/1553 modules 0 active

To Reproduce
Steps to reproduce the behavior:

1. Bootstrap a new Angular CLI Project
2. Run npx -p @storybook/cli sb init to bootstrap storybook for Angular
3. Install @storybook/addon-docs and create a story using MDX
4. Add a typo in a component import path
5. Build the project with build-storybook

Expected behavior
An error printed to the console and the process exiting with a non-zero exit code.

Code snippets
A repository has been created with this issue already reproduced:
https://github.com/esingletary/storybook-build-hang

System:

Environment Info:

  System:
    OS: Windows 10 10.0.17134
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1098.0

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[cpconcertage]

just because the stale bot seems a bit eager, I'll add my 2 cents. I have just had the same problem with a CI timeout because build-storybook got hung. For me it occurred here:

info => Compiling preview..
70% building 2316/2318 modules 2 active /<local directory>/node_modules/acorn-walk/dist/walk.mjsERR! => Failed to build the preview
ERR! ./src/design-components/ContentCard/ContentCard.stories.mdx
ERR! Cannot find file '../ReduxReadExample' in './src/design-components/ContentCard'.
(node:49886) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve '../ReduxReadExample' in '/<local directory>/src/design-components/ContentCard'
    at /<local directory>/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:925:10
    at /<local directory>/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /<local directory>/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /<local directory>/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /<local directory>/node_modules/neo-async/async.js:2830:7
    at /<local directory>/node_modules/neo-async/async.js:6877:13
    at /<local directory>/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /<local directory>/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /<local directory>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/<local directory>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /<local directory>/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /<local directory>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/<local directory>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /<local directory>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/<local directory>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /<local directory>/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
(node:49886) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:49886) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
70% building 2575/2575 modules 0 active

[MichaelDM]

@cpconcertage
I seem to be having the same issue.
Screenshot from AWS Codepipline
The strange thing is that when I trigger the build locally, it works.
Perhaps there is some more clues here to work with!

[cpconcertage]

@cpconcertage
I seem to be having the same issue.
Screenshot from AWS Codepipline
The strange thing is that when I trigger the build locally, it works.
Perhaps there is some more clues here to work with!

I don't think there are any clues when the build process hangs, unfortunately. From my limited experience, and similar to the person reporting this issue originally, there probably is an actual error in one of the files. The hanging on build doesn't tell you why it's hanging, so it's not much help. I can't think of anything to help find the problem source other than the brute force way of incrementally removing changes until the problem disappears, then adding back, etc. if you're not seeing errors with the build locally or with the storybook server.

[MichaelDM]

Thank you @cpconcertage.

That's exactly what I did, starting from a place that works and incrementally adding towards my current version.

Good news is that I found what was causing the build to fail!
For some reason, referencing "Story A" within "Story B" was the issue.

But the really weird part, is that locally it builds no problem... it's only in AWS CodePipeline that the build hangs. So I still have question marks.

So I switched my Pipeline strategy. Instead of building in CodePipeline, I build static version of Storybook in a pre-push script and then use that output for tests etc in CodePipeline.

[lohals]

We also have this issue using
"@storybook/react": "^6.0.26"

If any import in a story is "bad" then build hangs exactly at 70%, and a warning about UnhandledPromiseRejectionWarning is printed.

Both on local developer machines and on all our build agents.

Only workaround found was to add this package in main.js:
https://www.npmjs.com/package/make-promises-safe

This make the node build process stop with non-zero exit code.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.3 containing PR #13018 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.