After Angular 13 update storybook fails compile

[massimiliamanto74]

Hello everyones,
I'm trying to update my angular project with storybook (it works) from 11 to 13.
When I had finished the update, also the update of storybook, after run 'storybook-start' I receive this log in terminal and the compilation not finished.....

info @storybook/angular v6.4.12
info 
info => Loading presets
info => Using PostCSS preset with [email protected]
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/.storybook/tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0. 
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "otm-experience:build" for configuring Storybook
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
9% setup compilation SourceMapDevToolPlugin(node:44670) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval [as call] (eval at create (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:364:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/lib/Compiler.js:1055:26)
    at /Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/Users/massimiliamanto/Documents/lavoro/OTM/onthemap-experience-app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:44670) 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:44670) [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.

info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
assets by chunk 4.84 MiB (id hint: vendors)
  assets by status 4.47 MiB [big]
    asset 666.manager.bundle.js 4.11 MiB [emitted] [big] (id hint: vendors)
    asset 432.manager.bundle.js 371 KiB [emitted] [big] (id hint: vendors)
  asset 25.manager.bundle.js 189 KiB [emitted] (id hint: vendors)
  asset 133.manager.bundle.js 111 KiB [emitted] (id hint: vendors)
  asset 987.manager.bundle.js 65 KiB [emitted] (id hint: vendors)
  asset 122.manager.bundle.js 15.4 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.5 KiB [emitted] (name: runtime~main)
asset index.html 2.94 KiB [emitted]
asset 295.manager.bundle.js 1.22 KiB [emitted]
asset main.manager.bundle.js 1.04 KiB [emitted] (name: main)
Entrypoint main [big] 4.13 MiB = runtime~main.manager.bundle.js 14.5 KiB 666.manager.bundle.js 4.11 MiB main.manager.bundle.js 1.04 KiB
orphan modules 1.49 MiB [orphan] 329 modules
runtime modules 9.02 KiB 14 modules
javascript modules 4.45 MiB
  modules by path ./node_modules/ 4.45 MiB 803 modules
  modules by path ./*.inspect (ignored) 30 bytes
    ./util.inspect (ignored) 15 bytes [built] [code generated]
    ./util.inspect (ignored) 15 bytes [built] [code generated]
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.66.0) compiled successfully in 8639 ms

Can anyones help me to understand what is appened?

[shilman]

Angular 12+ uses webpack5 for bundling. Please see the migration instructions here:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-12-upgrade

[massimiliamanto74]

Hi @shilman, thanks for your message but I had done all the procedures suggested in documentation but the problem still exists.
Any suggestions?

[shilman]

Did you try these instructions as well?

WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)

[NShanmukh]

Hi @shilman, I do have the same problem. Tried with all the procedures but the problem still exists. If any had any solution, Please post here. Thanks in advance

[dylannnn]

Did you try these instructions as well?

WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)

Hi @shilman, this guide suits for angular application very well, but it seems this doesn't work for angular library project, I have to use the start-storybook and build-storybook command. Otherwise, storybook cannot load any styles and assets. Will this be changed in storybook v7?

[paulo101977]

I have a project that is a library too. And without start-storybook and build-storybook I will have to stop using the storybook. Does anyone have an idea how to solve the problem?

[marceltielman]

Hi @massimiliamanto74 I got the same error, managed to solve this by setting sourceMap to false on default project build