Type <ModuleName> does not have 'ɵmod' property.

[ninadvadujkar]

Storybook 6.3.4 does not work with Angular 12.1. Build succeeds but shows 99% done.
Storybook UI renders in Browser but stories fail to load.

Build stuck at 99%

<i> [webpack-dev-middleware] wait until bundle finished: /runtime~main.manager.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-e6bef3.manager.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /main.manager.bundle.js
99% done plugins webpack-hot-middlewarewebpack built preview 43c58eb64f10364901ac in 1661ms

Error in Storybook UI

Type AccordionModule does not have 'ɵmod' property.
Error: Type AccordionModule does not have 'ɵmod' property.
    at getNgModuleDef (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:44508:15)
    at recurse (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:68665:21)
    at recurse (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:68676:17)
    at registerNgModuleType (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:68661:5)
    at new NgModuleFactory$1 (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:68775:13)
    at compileNgModuleFactory__POST_R3__ (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:72468:27)
    at PlatformRef.bootstrapModule (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:72714:16)
    at CanvasRenderer.<anonymous> (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:108794:60)
    at step (http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:108708:23)
    at Object.next  #(http://localhost:6007/vendors-node_modules_angular_cdk_fesm2015_a11y_js-node_modules_angular_common_fesm2015_http_j-581d82.iframe.bundle.js:108689:53)

To Reproduce

• Upgrade to Angular 12 from Angular 11
• Upgrade Storybook from 6.2 to 6.3.4 using the npx sb upgrade command
• Manually upgrade @storybook/builder-webpack5 and @storybook/manager-webpack5 packages to 6.3.4
• Start Storybook

System

OS: macOS Big Sur 11.4
Processor: 2.3 GHz Dual-Core Intel Core i5
Node version: v14.16.1
NPM version: 6.14.12
Browser: Google Chrome Version 91.0.4472.114 (Official Build) (x86_64)
Storybook devDependencies:
    "@storybook/addon-a11y": "^6.3.4",
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-knobs": "^6.3.0",
    "@storybook/angular": "^6.3.4",
    "@storybook/builder-webpack5": "^6.3.4",
    "@storybook/manager-webpack5": "^6.3.4"

Angular dependencies:
    "@angular/animations": "~12.1.0",
    "@angular/cdk": "^12.1.0",
    "@angular/common": "~12.1.0",
    "@angular/compiler": "~12.1.0",
    "@angular/core": "~12.1.0",
    "@angular/forms": "~12.1.0",
    "@angular/platform-browser": "~12.1.0",
    "@angular/platform-browser-dynamic": "~12.1.0",
    "@angular/router": "~12.1.0"

Angular devDependencies
    "@angular-devkit/build-angular": "~12.1.0",
    "@angular-devkit/core": "^12.1.0",
    "@angular/cli": "~12.1.0",
    "@angular/compiler-cli": "~12.1.0",
    "@angular/language-service": "~12.1.0"

Additional context

• Before upgrading to 6.3.4 I was facing below issue:
  Storybook with builder-webpac5 complains about conflicting values in DefinePlugin and not redefine custom variables #14257

Screenshots:

Build stuck at 99%

Error in Storybook UI

Update:

I can verify that this issue is reproducible with a fresh new setup and install of Storybook 6.3 with a fresh new Angular 12 project.
Steps to reproduce:

1. Create an Angular 12 project with Angular CLI
2. Create a test library using ng generate library my-lib
3. Disable Ivy for the library by adding "enableIvy": false to tsconfig.lib.prod.json
4. Install Storybook using npx sb init
5. Create a story for this newly created library
6. Build library in production
7. Run Storybook
8. See error when you open the story

The issue doesn't seem to appear when Ivy is enabled (Storybook build still stuck at 99% though) . We would like to build in the legacy compiler because we distribute the code as NPM package.

[ninadvadujkar]

I found one issue on Giters Storybook which seems similar to this issue:
https://giters.com/storybookjs/storybook/issues/15481

[shilman]

closing as dupe to #15481