Storybook: Storybook broken on Angular 11

[hansottowirtz]

Tried to upgrade to Angular 11 since its release yesterday. When running npx storybook, we're encountering this error:

info => Loading presets
WARN   Failed to load preset: "<project>/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js"
ERR! Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'
ERR! Require stack:
ERR! - <project>/node_modules/@storybook/angular/dist/server/angular-cli_utils.js
ERR! - <project>/node_modules/@storybook/angular/dist/server/angular-cli_config.js
ERR! - <project>/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js
ERR! - <project>/node_modules/@storybook/core/dist/server/presets.js
ERR! - <project>/node_modules/@storybook/core/dist/server/config.js
ERR! - <project>/node_modules/@storybook/core/dist/server/build-static.js
ERR! - <project>/node_modules/@storybook/core/server.js
ERR! - <project>/node_modules/@storybook/angular/dist/server/index.js
ERR! - <project>/node_modules/@storybook/angular/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:899:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:1090:19)
ERR!     at require (internal/modules/cjs/helpers.js:75:18)
ERR!     at Object.<anonymous> (<project>/node_modules/@storybook/angular/dist/server/angular-cli_utils.js:20:25)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1201:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1050:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:938:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1090:19)
ERR!     at require (internal/modules/cjs/helpers.js:75:18)
ERR!     at Object.<anonymous> (<project>/node_modules/@storybook/angular/dist/server/angular-cli_config.js:30:27)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1201:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1050:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:938:14)

And then a second error:

ERROR in ./src/stories/button.stories.ts
Module not found: Error: Can't resolve 'src/app/button/button.component' in '<project>/src/stories'
 @ ./src/stories/button.stories.ts 5:0-87 33:19-38
 @ ./src/stories sync nonrecursive ^\.\/(?:(?!\.)(?=.)[^/]*?\.stories\.(ts))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

To Reproduce

Minimal repro:

ng --version # => 11.0.0
ng new repro
cd repro
npx -p @storybook/cli sb init
npm run storybook

Note that the second error doesn't occur on this minimal repro. I don't know if the two errors are related.

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Safari: 14.0
  npmPackages:
    @storybook/angular: ^6.0.28 => 6.0.28

[klemenoslaj]

The problem is the deep import from @angular-devkit/build-angular, which is not a public api: https://github.com/storybookjs/storybook/blob/59a3c87a9918a772c2c935b95047c902963ad8c2/app/angular/src/server/angular-cli_utils.ts#L11-L14

This can be solved by replacing the import with @angular-devkit/build-angular/src/webpack/configs.

EDIT:

Until Storybook is fixed you could execute as postinstall something like:

sed -i '' 's/@angular-devkit\/build-angular\/src\/angular-cli-files\/models\/webpack-configs/@angular-devkit\/build-angular\/src\/webpack\/configs/g' node_modules/@storybook/angular/dist/server/angular-cli_utils.js

[hansottowirtz]

@klemenoslaj Thanks! The workaround solves both errors.

[shilman]

Can we try to require the new version and then require the old version on failure, e.g. https://github.com/storybookjs/storybook/pull/13060

[klemenoslaj]

Can we try to require the new version and then require the old version on failure, e.g. #13060

That's exactly what I'm doing locally now. Attempted to find a better fix for a PR but I guess that's the best/easiest way.
We are walking a thin ice here tho, webpack config is not a public api from Angular CLI perspective (sadly..).

EDIT:

Can I give this issue a PR?

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-rc.1 containing PR #13096 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.