Giters

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

Home Page:https://storybook.js.org

Repository from Github https://github.comstorybookjs/storybookRepository from Github https://github.comstorybookjs/storybook

build-storybook (v6.3.0-rc.4) produce output but process doesn't complete

meriturva opened this issue · comments

commented

We have quite a big project here (Angular v12) and with Storybook 6.3.0-rc.4 we have a blocking issue for our CI system.

Running: build-storybook -o dist/storybook --loglevel verbose we see log output with no errors:

info @storybook/angular v6.3.0-rc.4
info
info => Cleaning outputDir: D:\Projects\git.xxx.com\web\xxx-yyy-web\dist\storybook
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "D:\Projects\git.xxx.com\web\xxx-yyy-web\.storybook"
info => Loading 6 other files in "D:\Projects\git.xxx.com\web\xxx-yyy-web\.storybook"
info => Loading custom manager config
info => Adding stories defined in "D:\Projects\git.xxx.com\web\xxx-yyy-web\.storybook\main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "xxx-yyy-Web:build" for configuring Storybook
info => Using angular-cli webpack config
info => Loading custom Webpack config (full-control mode).
7% setup compile fork-ts-checker-webpack-pluginStarting type checking service...
16% building 2/17 entries 443/568 dependencies 12/200 modules[BABEL] Note: The code generator has deoptimised the styling of D:\Projects\git.xxx.com\web\xxx-yyy-web\node_modules\prettier\standalone.js as it exceeds the max of 500KB.
29% building 6/17 entries 9112/9200 dependencies 1767/2821 modulesinfo => Manager built (39 s)
WARN DefinePlugin
WARN Conflicting values for 'process.env'
info => Preview built (1.95 min)
WARN System.import() is deprecated and will be removed soon. Use import() instead.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
WARN System.import() is deprecated and will be removed soon. Use import() instead.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'NumberLevelOptions' (imported as 'NumberLevelOptions') was not found in '../models/number-level-options' (module has no exports)
WARN export 'NumberLevelOptions' (imported as 'NumberLevelOptions') was not found in '../models/number-level-options' (module has no exports)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ModalOptions' (imported as 'ModalOptions') was not found in '../models/op-request-modal-settings' (possible exports: ModalWidth)
WARN export 'ConfigurationItemData' (imported as 'ConfigurationItemData') was not found in '@yyy/configuration' (possible exports: AbstractImportExportService, JsonFileImportExportService)
WARN export 'ConfigurationItemData' (imported as 'ConfigurationItemData') was not found in '@yyy/configuration' (possible exports: AbstractImportExportService, JsonFileImportExportService)
WARN export 'ConfigurationItemData' (imported as 'ConfigurationItemData') was not found in '@yyy/configuration' (possible exports: AbstractImportExportService, JsonFileImportExportService)
WARN export 'ConfigurationItemData' (imported as 'ConfigurationItemData') was not found in '@yyy/configuration' (possible exports: AbstractImportExportService, JsonFileImportExportService)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in './models/configurationGridSelection' (module has no exports)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in './models/configurationGridSelection' (module has no exports)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in '../models/configurationGridSelection' (module has no exports)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in '../models/configurationGridSelection' (module has no exports)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in '../models/configurationGridSelection' (module has no exports)
WARN export 'ConfigurationGridSelection' (imported as 'ConfigurationGridSelection') was not found in '../models/configurationGridSelection' (module has no exports)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN export 'ModalEditorConfiguration' (imported as 'ModalEditorConfiguration') was not found in '../models/modal-editor-configuration' (module has no exports)
WARN export 'ModalEditorConfiguration' (imported as 'ModalEditorConfiguration') was not found in '../models/modal-editor-configuration' (module has no exports)
WARN export 'ProgramFeatures' (imported as 'ProgramFeatures') was not found in '@yyy/program' (possible exports: BaseProgramsService, BreakpointExecutionAction, ContainerInstruction, EnvironmentExecutionAction, EnvironmentParameterTypeDTO, ExecutionStatus, ExecutorStatus, ExecutorStatusType, INSTRUCTION_TEMPLATE_OPTIONS, INSTRUCTION_TEMPLATE_TEST, Instruction, InstructionDescriptor, InstructionEventLevel, InstructionExecutionAction, InstructionFactory, InstructionMessage, InstructionParameterType, InstructionResult, InstructionReturnType, InstructionStatusAndResult, InstructionType, InstructionsDescriptorsService, InstructionsExecutorService, Link, LinkPlugin, LoadProgramRequest, MemoryParameterType, NewProgramRequest, PROGRAM_ENTITY, PROGRAM_LINK_PLUGINS, Program, ProgramDescriptor, ProgramEventLevel, ProgramExecutionAction, ProgramExecutionEvent, ProgramExecutionEventBreakpoint, ProgramExecutionEventEnvironment, ProgramExecutionEventInstruction, ProgramExecutionEventMessage, ProgramExecutionEventProgram, ProgramExecutionEventType, ProgramFactory, ProgramHeader, ProgramIdentifier, ProgramMessage, ProgramModule, ProgramReference, ProgramResult, ProgramResultHeader, ProgramWebSocket, ProgramsDebuggerService, ProgramsDescriptorsService, ProgramsEditService, ProgramsExecutorService, ProgramsResultsService, ReadMemoryDirective, ReadMemoryType, RunInstructionAndGetResultDirective, RunInstructionAndGetResultInLoopDirective, SubRoutineInstruction, TaskExecution, TaskExecutionStatus)
WARN export 'ProgramFeatures' (imported as 'ProgramFeatures') was not found in '@yyy/program' (possible exports: BaseProgramsService, BreakpointExecutionAction, ContainerInstruction, EnvironmentExecutionAction, EnvironmentParameterTypeDTO, ExecutionStatus, ExecutorStatus, ExecutorStatusType, INSTRUCTION_TEMPLATE_OPTIONS, INSTRUCTION_TEMPLATE_TEST, Instruction, InstructionDescriptor, InstructionEventLevel, InstructionExecutionAction, InstructionFactory, InstructionMessage, InstructionParameterType, InstructionResult, InstructionReturnType, InstructionStatusAndResult, InstructionType, InstructionsDescriptorsService, InstructionsExecutorService, Link, LinkPlugin, LoadProgramRequest, MemoryParameterType, NewProgramRequest, PROGRAM_ENTITY, PROGRAM_LINK_PLUGINS, Program, ProgramDescriptor, ProgramEventLevel, ProgramExecutionAction, ProgramExecutionEvent, ProgramExecutionEventBreakpoint, ProgramExecutionEventEnvironment, ProgramExecutionEventInstruction, ProgramExecutionEventMessage, ProgramExecutionEventProgram, ProgramExecutionEventType, ProgramFactory, ProgramHeader, ProgramIdentifier, ProgramMessage, ProgramModule, ProgramReference, ProgramResult, ProgramResultHeader, ProgramWebSocket, ProgramsDebuggerService, ProgramsDescriptorsService, ProgramsEditService, ProgramsExecutorService, ProgramsResultsService, ReadMemoryDirective, ReadMemoryType, RunInstructionAndGetResultDirective, RunInstructionAndGetResultInLoopDirective, SubRoutineInstruction, TaskExecution, TaskExecutionStatus)
WARN export 'RepoItemData' (imported as 'RepoItemData') was not found in '../models/repoItemData' (module has no exports)
WARN export 'RepoItemData' (imported as 'RepoItemData') was not found in '../models/repoItemData' (module has no exports)
WARN export 'ExportableCallbackFn' (imported as 'ExportableCallbackFn') was not found in './repo.component' (possible exports: RepoComponent)
WARN export 'ExportableCallbackFn' (imported as 'ExportableCallbackFn') was not found in './repo.component' (possible exports: RepoComponent)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN export 'WindowBridge' (imported as 'WindowBridge') was not found in '@yyy/core' (possible exports: yyyClassColor, yyyColor, BaseError, BaseServiceConfiguration, BootStrategy, Configuration, CoreModule, DEFAULT_RESIZE_RATE_LIMIT, DEFAULT_SERVER_CODE, EncodingPipe, HttpError, HttpErrorMessageInterceptor, HttpStatusCode, ImagePage, ImageWebSocket, LOCATION_TOKEN, LocalizedString, NotificationLevel, NotificationMessage, PATH_SEPARATOR, PRESETS_INSTRUCTIONS_PARAMETER_CODE, PRESETS_PARAMETER_CODE, PRESETS_PROGRAMS_PARAMETER_CODE, PackageInfo, RefreshImageDirective, Server, ServerStatus, ServerStatusType, SystemService, SystemServiceConfiguration, WINDOW_BRIDGE, Waveform, WaveformWebSocket, WebSocket, Windows1252Encoder, base64Decode, base64Encode, byteArrayToHexString, dataUrlRexExp, getArrayDimensions, getKeysContains, getKeysStartWith, getParameterFromUrl, hexToRGBA, isDataURL, lowerCaseFileName, noop, splitArray, textDecode, textEncode)
WARN DefinePlugin
WARN Conflicting values for 'process.env'
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   fontawesome-webfont.svg (434 KiB)
WARN   yyy.svg (287 KiB)
WARN   fa-brands-400.svg (730 KiB)
WARN   fa-solid-900.svg (897 KiB)
WARN   OpenSans-Regular.svg (267 KiB)
WARN   OpenSans-Bold.svg (265 KiB)
WARN   scripts.js (4.39 MiB)
WARN   assets/monaco/typings/script.d.ts (833 KiB)
WARN   assets/monaco/vs/editor/editor.main.js (2.44 MiB)
WARN   assets/monaco/vs/language/css/cssMode.js (778 KiB)
WARN   assets/monaco/vs/language/css/cssWorker.js (771 KiB)
WARN   assets/monaco/vs/language/html/htmlMode.js (460 KiB)
WARN   assets/monaco/vs/language/html/htmlWorker.js (451 KiB)
WARN   assets/monaco/vs/language/typescript/tsWorker.js (4.19 MiB)
WARN   main.6349edc9.iframe.bundle.js (8.79 MiB)
WARN   930.1de0ab8f.iframe.bundle.js (8.14 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (16.9 MiB)
WARN       runtime~main.ef8d9fe0.iframe.bundle.js
WARN       930.1de0ab8f.iframe.bundle.js
WARN       main.6349edc9.iframe.bundle.js
WARN   scripts (4.39 MiB)
WARN       scripts.js
WARN
info => Output directory: D:\Projects\git.xxx.com\web\xxx-yyy-web\dist\storybook

Actually, we find storybook build on the output directory but the main process doesn't complete. The build process still running with 0 CPU consumption(our CI cannot complete correctly). We have enabled build-storybook with log verbose and webpack debug flag without seeing any errors.

commented

I have just build a static storybook from a new angular 12.0.4 project and storybook 6.3.0-rc.5 finding same issue.
Build project is blocked after generating all files necessary. Investigating a little bit i have found that:

due to the fact that buildStatic is an async function:

https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/build.ts#L4

I guess that you have to wait for his competition or (because it is basically a main) i guess you could just add a process.exit(0) here:

https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136

@shilman have you never tried to build static storybook with 6.3.0-rc.5 version and angular v12?

commented

@meriturva alternate approach is the process.exit in angular/dist/ts3.9/server/build.js, I do this as npm post install script to keep our Jenkins Pipeline running

sed -i 's/server_1.buildStatic(options_1.default);/server_1.buildStatic(options_1.default).then(function(){process.exit(0)});/g' node_modules/@storybook/angular/dist/ts3.9/server/build.js

commented

Thanks @rschulz-scisys, actually we have also this kind of approach on our Teamcity build pipeline but I think it is an issue to fix quite soon. I'm going to test rc7 in minutes.

Edit: same issue on v6.3.0-rc.7

commented

I just test all RC now 😄 and same issue on v6.3.0-rc.8
Sorry if I'm quite annoying but I think the issue has to be fixed quite soon.

commented

@meriturva are you able to submit a PR to fix it?

commented

Thanks, @shilman for your request, actually my proposal is just to add a process.exit(0) on file: https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136
I could easily arrange a PR but I really don't know why it is necessary, secondly... is that issue present also on other frameworks, for example, react or vue?

I work actively in Angular and I never used storybook on Vue or React

commented

I've never heard of this issue until now. Perhaps it has something to do with the recent Angular12 changes, or the recent Storybook changes for Angular (e.g. Ivy support). Creating a repro or a PR is the best way to help get an issue fixed.

commented

I have tested right now a static generation with vue and process exit correctly.

How to reproduce the issue with Angular.... quite simple:

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

I have made other tests creating new projects based on the latest angular cli version (v12.0.4) and I found that the build issue is related to SCSS. Creating a new project just with CSS support storybook build static process exit correctly.

commented

I have investigated a little bit mode using a simple lib named: why-is-node-running

So I have just modified https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136 with:

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
   }));
   log() // logs out active handles that are keeping node running
 } catch (e) {
   _nodeLogger.logger.error(e);

   process.exit(1);
 }

Note the log call of lib why-is-node-running

And I have few logs about whats going on, what I found is a sass worker active:

# WORKER
D:\Projects\xxx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:104 - const worker = new worker_threads_1.Worker(workerPath, {
D:\Projects\xxx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:70  - this.workers.push(this.createWorker());
D:\Projects\xxx\node_modules\sass-loader\dist\index.js:46                               - render(sassOptions, (error, result) => {

Now I'm looking for a specific use of angular integration on package @storybook/angular but I really don't have so much time to spend on it right now.

commented

I found that angular sass service has already a close method to terminate and it is linked to webpack compiler hooks:

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/sass/sass-service.ts#L122

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts#L122

so I guess storybook for angular doesn't shutdown correctly webpack compiler? I'm just guessing!

commented

@meriturva Just brainstorming, could it be a webpack4/webpack5 issue? Maybe something in @nrwl/angular, @nrwl/storybook, @storybook/angular that's not making the right close call for webpack5?

commented

@JSMike I'm not a webpack expert but I think that it is something related to @storybook/angular package. Sadly I have no time to investigate more and tomorrow we are going just to force process.exit on our continuous integration pipeline.

commented

We have prepared (and attached) a simple patch using library patch-package https://www.npmjs.com/package/patch-package
Now our build pipeline exit correctly, but I repeat: force a process.exit is not the correct solution. It is important to know why angular workers (scss worker for sure) are not terminated correctly.

@storybook+angular+6.3.0-rc.11.zip

commented

@shilman : to reproduce even easier just:

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

TLDR; Workaround: downgrade to Angular 12.0.3.

After some investigation, it looks like Storybook RC is working fine when using angular/*@12.0.3 but stop completing as soon as we are using angular/*@12.0.4. There is not a lot of changes in the 12.0.4 release, see https://github.com/angular/angular/releases/tag/12.0.4 + https://github.com/angular/angular-cli/releases/tag/v12.0.4, but I didn't found anything obvious for now.

Edit: Narrowed to @angular-devkit/build-angular@12.0.4, and maybe angular/angular-cli#21045?

commented

Great catch @gaetanmaisse ! i was looking for a commit on @storybook/angular package but the change was on @angular-devkit/build-angular. Happy to know that it is related to scss worker as I suspected before.

Anyway patching with process.exit works like a charm on our CI infrastructure even with angular 12.0.4 version.

commented

I finally had the time to test.
and I agree with you I think that is exactly this change angular/angular-cli@1dd5c28#diff-6f1d85ee071c6e16d742bed5b1c832894a14dc4c9452f0bd6b95e3b61e5d1b17L210

I think we should open an angular-cli issue to ask their opinion? or comment on this PR angular/angular-cli#21045

maybe the close method should be called but it is not the case 🤷‍♂️
And the compiler.hooks.shutdown is not called. webpack does not seem to want to close properly

commented

My workaround for not down leveling Angular is using patch-package and following patch:

diff --git a/node_modules/@storybook/core-server/dist/cjs/build-static.js b/node_modules/@storybook/core-server/dist/cjs/build-static.js
index 7342586..78fc918 100644
--- a/node_modules/@storybook/core-server/dist/cjs/build-static.js
+++ b/node_modules/@storybook/core-server/dist/cjs/build-static.js
@@ -167,6 +167,8 @@ async function buildStatic(_ref2) {
       configType: 'PRODUCTION',
       cache: _coreCommon.cache
     }));
+
+    process.exit(0);
   } catch (e) {
     _nodeLogger.logger.error(e);
commented

We have the same issue here, with Angular 12.1
Downgrading Angular is not option for us, so we had to remove Storybook from our CI until resolution.

commented

@ld210 you have to patch storybook until issue is not fixed. See; #15227 (comment)

commented

FYI, I had to rebuild my NX project (due to other reasons) and I'm no longer experiencing this issue. (Although I had to downgrade to nx 12.3.6 to resolve other build errors), but I'm on Angular 12.1.x without hanging on build, using builder @nrwl/storybook:storybook

commented

Any plan to fix this?

commented

I open an issue @angular/cli, feel free to contribute there also : angular/angular-cli#21261
Someone made an interesting point.

commented

Thanks guys. Bringing in the big guns (@bebraw) to see if we can fix it on the Storybook side!

commented

I have an initial fix to test at #15483 . I added a bit of error handling + process.exit after the process completes.

My feeling is that it shouldn't be needed, though, and it's possible there's some other process that's left running as the build function clearly completes. Can this be something on Angular side? During my testing, ngcc was left in a weird state and I noticed that only after adding a try/catch. In any case, there's a fix now but it's possible a better fix exists.

commented

from Angular guys

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.

angular/angular-cli#21261 (comment)

commented

@Jispry Thanks, I tested that over process.exit and it's definitely a better fix and it explains the behavior. I've adjusted #15483 accordingly to test.

commented

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

npx sb upgrade --prerelease
commented

Will this fix be available in 6.3.2 ?

commented

Will this fix be available in 6.3.2 ?

Once a few of you confirm it's working well, I'll patch it back to 6.3.x.

commented

Once a few of you confirm it's working well, I'll patch it back to 6.3.x.

confirmed, it works

commented

Will this fix be available in 6.3.2 ?

Once a few of you confirm it's working well, I'll patch it back to 6.3.x.

Confirmed, installing the prerelease resolved the issue

commented

Will this fix be available in 6.3.2 ?

Once a few of you confirm it's working well, I'll patch it back to 6.3.x.

Confirmed again, the prerelease fixed the issue for us. 👍

commented

I also confirm that it works for me in version 6.4.0-alpha.12
info => Output directory: C:\ixxi\hopenTicket\ticketing-lib-ui\storybook-static Done in 99.38s. and after getting back to shell 👍

commented

woohoo!! gonna patch this back to 6.3 now. thanks everybody 🙏

commented

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.3 containing PR #15483 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade