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

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.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 21
  • Comments: 38 (13 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

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

Will this fix be available in 6.3.2 ?

@shilman : to reproduce even easier just:

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

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.

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 https://github.com/angular/angular-cli/pull/21045?

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

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

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!

@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

@ld210 you have to patch storybook until issue is not fixed. See; https://github.com/storybookjs/storybook/issues/15227#issuecomment-865655700

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.

I finally had the time to test. and I agree with you I think that is exactly this change https://github.com/angular/angular-cli/commit/1dd5c28f8d32e382d271a3da2bed25f16e88153a#diff-6f1d85ee071c6e16d742bed5b1c832894a14dc4c9452f0bd6b95e3b61e5d1b17L210

I think we should open an angular-cli issue to ask their opinion? or comment on this PR https://github.com/angular/angular-cli/pull/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