nx: Nx Version 13 not working with Storybook

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

@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 Thank you very much for the response! Sorry for the late reply. I responded to the other ticket you linked by accident: https://github.com/storybookjs/storybook/issues/16977#issuecomment-1012990270

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.

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.

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.

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

@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 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

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!

@KirillMetrik check this comment, it works with Storybook 6.5.0 alpha https://github.com/storybookjs/storybook/issues/16977#issuecomment-1004636568

• 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