Angular 12.1 & Storybook 6.3 - Storybook build process never complete

[ld210]

🐞 Bug report

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, was working fine until @angular/[email protected]

Description

We have an Angular project (v12.1), and we are using Storybook for our design system (v6.3). When building Storybook, the process produce an output, but never close, breaking our CI.

🔬 Minimal Reproduction

• ng new testProject (with angular cli v12) (choosing SCSS)
• npx sb@next init
• build-storybook

🔥 Exception or Error

There's no errors

🌍 Your Environment

Angular CLI: 12.1.0
Node: 14.15.4
Package Manager: npm 7.19.0
OS: darwin x64

Angular: 12.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.4

Anything else relevant?

There is an open issue in Storybook repo : #15227 where someone put up a reproduction repo : Storybook timeout repro
Investigations appears to leads to a change in this PR : 21045
There is a workaround, a bit dirty though.

[toamitc]

We are facing same issue

[alan-agius4]

I did look into this briefly, it appears that when using Storybook the Webpack compiler is not shutting down properly and the shutdown event hook is never called, which causes the workers not to terminate. At the point, I think Storybook team are in a better position to investigate and determine why this is happening, since they are more familiar of how they are configuring the build and all the plugins/loaders being used.

It's important to mentioned that Storybook is also using private APIs to get and alter the Webpack configuration, these APIs are not meant to be used externally.

[alan-agius4]

The fact that the build never completes, is a side-effect of Webpack not triggering the shutdown event/cycle, while we can do a workaround for this, it is far from ideal as not shutting down Webpack properly might have other undefined behaviour.

herefore, the best action here is for the Storybook team to determine why Webpack is not shutting down properly.

[shilman]

@alan-agius4 we'll look into this and see if there's something missing on the storybook side

[ld210]

Thanks guys !

[clydin]

From an initial review of the storybook code, it appears that the storybook Webpack 5 integration code does not call the Webpack 5 compiler's close method (https://webpack.js.org/api/node/#run). This is most likely the cause of the shutdown hook not running. This also has the potential to lead to Webpack cache corruption (assuming Webpack 5 file caching is enabled) as the cache may not be shutdown properly.

[alan-agius4]

Closing this is not actionable by the Angular team.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}