Nx Version 13 not working with Storybook

[KirillMetrik]

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: Storybook 6.4 build failing with Angular 13.1 storybookjs/storybook#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",

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

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

7. add "build" target to angular.json in order to work around this issue: Storybook fails to launch without a default project #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"
                        }
                    }
                },

8. 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": [ 
        "." 
    ] 
}

9. 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: {
    }
});

10. run nx run my-lib:storybook
11. 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

[nzacca]

Noting this is also being discussed here: storybookjs/storybook#17039 (comment)

[mandarini]

Hi there @KirillMetrik ! I did not look into your issue yet, will do so, soon. In the meantime, can you try this solution and let me know if it works for you?

[KirillMetrik]

Hi @mandarini , not sure how is this connected with styles?
Will try this and another possible workaround (storybookjs/storybook#16977 (comment)) in the next few days.

[rfprod]

@KirillMetrik check this comment, it works with Storybook 6.5.0 alpha storybookjs/storybook#16977 (comment)

• https://github.com/rfprod/nx-ng-starter/blob/main/.storybook/main.js#L42-L59 - webpack config tweak
• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1192-L1207 - build storybook
• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1232-L1247 - serve storybook
• https://nx-ng-starter-documentation.web.app/assets/storybook/index.html - deployed storybook

[mandarini]

Hi @KirillMetrik , I did not look into your issue, so I just suggested some solution to a similar error, related to Angular 13! :) So, sorry about that! We're working on solving the issues for Storybook+Angular 13, but I think it's mostly related on the Storybook side. Will keep you posted!

Thanks @rfprod for jumping in!

[stefan-schweiger]

@mandarini When using these workaround there still is an error for some people that polyfill.ts can't be found. After adding it to the includes in tsconfig.json which is used by storybook it works. I think this part of the problem might still be related to the whole project.json handling of nx.

EDIT: Also the hot reload goes out the window, doesn't matter if it's storybook 6.4 or 6.5

[rfprod]

@stefan-schweiger if you define a build config that does not use polyfills it will work without it.

For example, remove this line https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1166, then remove this line https://github.com/rfprod/nx-ng-starter/blob/main/apps/documentation/.storybook/tsconfig.json#L7

Notice project build configs (if you omit it, the default app build config will be used):

• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1204
• https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1244

Now if you execute npx nx run documentation:build-storybook or npx nx run documentation:storybook, there will be no polyfills error.

[stefan-schweiger]

@rfprod thanks I will try that workaround out 😉 But this is still a breaking change in the combination of angular+nx+storybook which should be adressed properly 😕

[mandarini]

@rfprod would you like to submit a PR on our Storybook generator to add the webpack config tweak you created?

I'm referring to this. Let me know if you want to do this, or I can take this up and give you credit in the PR!

const rules = (config.module.rules ?? []).filter(
      (rule) =>
        rule.test !== /\.html$/ &&
        rule.exclude !== /\.async\.html$/ &&
        !rule.loader?.includes('raw-loader')
    );
    config.module.rules = [...rules];

[mandarini]

@KirillMetrik @stefan-schweiger thanks for posting all these comments/suggestions/issues! :) I tried in a new workspace to generate a new lib/app, with components, generated Storybook configuration, and indeed I got the same experience as you described, the

export default "
....

After adding what @rfprod suggested in my main.js the issue goes away. Maybe this can be a nice solution to this problem, and we can hope that the new version of Storybook fixes all other issues, related to the polyfills, that you described.

Please let me know if you find any other issues in the angular+nx+storybook integration!! :)

[rfprod]

@rfprod would you like to submit a PR on our Storybook generator to add the webpack config tweak you created?

I'm referring to this. Let me know if you want to do this, or I can take this up and give you credit in the PR!

const rules = (config.module.rules ?? []).filter(
      (rule) =>
        rule.test !== /\.html$/ &&
        rule.exclude !== /\.async\.html$/ &&
        !rule.loader?.includes('raw-loader')
    );
    config.module.rules = [...rules];

@mandarini I'll open the PR in several minutes. However, you'll have to help me a bit as I'm getting into the source code so that I don't miss something. So far I've found only one place where it has to be added.

[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.

[mandarini]

Hi @stefan-schweiger ! Thanks for pointing this out. This is indeed a workaround, and we're waiting on the Storybook side for the Angular 13 issues to be solved. For the time being, let's all try to be patient, I'm sure everyone who's working on this is doing the best they can.

[nzacca]

This should now be fixed with the latest 6.5.0-alpha.12 build from Storybook. The only problem we had left was hot reloading which we had to make the following changes to get working again:

// angular.json / project.json
...
"targets": {
  "build": {
    "configurations": {
      "production": { ... },

      // Add this to enable watch mode
      "storybook": {
        "watch": true
      } 
    }
  },
  ...

  "storybook": {
    "options": {
      // Change the build target to use the storybook build config we created above
      "projectBuildConfig": "<project_name_from_above>:build:storybook"
    }   
  } 
}

While this PR from Storybook makes a change to fix HMR for the default scenario, watch is set to false by default in angular build configs which means this overrides the default within Storybook. In the change above we are resetting this to true.

Ideally, it would be nice if this was just set by default in the executor but this is the workaround we've opted to use for now. Perhaps something needs to be adjusted within Nx to read the watch config setting and use that to override the build config by default.

[stefan-schweiger]

@nzacca for me the polyfill.ts not found problem also still remains, but at least the html-loader problem is gone now.

[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.

[mandarini]

Please take a look at this comment @nzacca @stefan-schweiger storybookjs/storybook#16977 (comment)

Also, command suggestion PR and PR that passes the current project build config automatically.

[nzacca]

@mandarini Thank you very much for the response! Sorry for the late reply. I responded to the other ticket you linked by accident: storybookjs/storybook#16977 (comment)

What we ended up doing was just setting the projectBuildConfig in the project.json of the library to prevent having to set this from the command line. That works well but I'm curious if you know of a better way to resolve the style paths without having to duplicate them.

[mandarini]

New docs for styles and stylePreprocessorOptions

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.