Nx Version 13 not working with Storybook

Current Behavior

Currently Storybook cannot be correctly run for libraries created with standard tools in NX. After creating a workspace, adding a library and Storybook to the library, the Storybook itself doesn’t work correctly. Please see reproduction steps for details.

Expected Behavior

Storybook should work and render stories correctly. This worked for NX 12 and Storybook 6.3.0.

Steps to Reproduce

Quick Reproduction

I have prepared a GitHub repo reproducing the issue.

1. clone https://github.com/KirillMetrik/story-test
2. run npm install
3. run nx run my-lib:storybook
4. After build finishes, open the story for “Super” component.

Expected render for the story:

Hello, I am super!

Actual render for the story:

export default "
\r\n Hello, I am super!\r\n
";

Long Reproduction (all steps from scratch)

1. create a new workspace: npx create-nx-workspace --preset=angular
2. create a new library ng g @nrwl/angular:lib my-lib
3. add Storybook to the newly created library: nx g @nrwl/angular:storybook-configuration my-lib
4. modify references to Storybook in package.json in order to work around issue: https://github.com/storybookjs/storybook/issues/16977 :

    "@storybook/addon-essentials": "6.5.0-alpha.4",
    "@storybook/angular": "6.5.0-alpha.4",
    "@storybook/builder-webpack5": "6.5.0-alpha.4",
    "@storybook/manager-webpack5": "6.5.0-alpha.4",

1. run npm install
2. add a simple component to your library, e.g. with the following template:

<div>
    Hello, I am super!
</div>

1. add “build” target to angular.json in order to work around this issue: https://github.com/nrwl/nx/issues/8199

"build": {
                    "builder": "@nrwl/angular:package",
                    "options": {
                        "tsConfig": "libs/my-lib/tsconfig.lib.json",
                        "project": "libs/my-lib/ng-package.json"
                    },
                    "configurations": {
                        "production": {
                            "tsConfig": "libs/my-lib/tsconfig.lib.prod.json"
                        }
                    }
                },

1. add “ng-package.json” to libs/my-lib folder and fill it with the following content:

{ 
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 
    "dest": "../../dist/libs/my-lib", 
    "lib": { 
        "entryFile": "src/index.ts" 
    }, 
    "allowedNonPeerDependencies": [ 
        "." 
    ] 
}

1. Add a simple story for your component:

import { Meta, Story } from '@storybook/angular';
import { SuperComponent } from './super.component';

export default {
    title: 'Super',
    component: SuperComponent
} as Meta;

export const Super: Story<SuperComponent> = () => ({
    props: {
    }
});

1. run nx run my-lib:storybook
2. After build finishes, open the story for our component.

Expected render for the story:

Hello, I am super!

Actual render for the story:

export default "
\r\n Hello, I am super!\r\n
";

Environment

Node : 14.17.0
  OS   : win32 x64
  npm  : 6.14.13

  nx : 13.4.2
  @nrwl/angular : 13.4.2
  @nrwl/cli : 13.4.2
  @nrwl/cypress : 13.4.2
  @nrwl/devkit : 13.4.2
  @nrwl/eslint-plugin-nx : 13.4.2
  @nrwl/express : undefined
  @nrwl/jest : 13.4.2
  @nrwl/linter : 13.4.2
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.2
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.2
  @nrwl/storybook : 13.4.2
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.1
         @angular/common: 13.1.1
         @angular/compiler: 13.1.1
         @angular/core: 13.1.1
         @angular/forms: 13.1.1
         @angular/platform-browser: 13.1.1
         @angular/platform-browser-dynamic: 13.1.1
         @angular/router: 13.1.1
         @angular-devkit/build-angular: 13.1.2
         @angular/cli: 13.1.2
         @angular/compiler-cli: 13.1.1
         @angular/language-service: 13.1.1
         @storybook/angular: 6.5.0-alpha.4

[stefan-schweiger]

@rfprod @mandarini to be honest in my eyes this is not a fix but a workaround which should be removed as soon as possible. The underlying issue still remains and needs to be fixed in either Angular or Storybook, but nobody seems to feel responsible for this right now.

For now I will stay on nx 13.3.6 which uses Angular 13.0 and works without this patch.

[nzacca]

@stefan-schweiger Yes, that is another issue that only affects libraries using Storybook. We fixed that manually by including the polyfill in the storybook tsconfig for that library.

// .storybook/tsconfig
{
  ...
  files: ["../../../apps/mainapp/src/polyfills.ts"]
}

This has allowed us to move forward with our Angular 13 upgrade. Hopefully there is a better configuration for this in future.