Nx: Storybook fails to execute when running in an Nx workspace

[nzacca]

Current Behavior

When an Nx empty workspace is created, and an Angular app is added with Storybook support, Storybook fails to start with the following error: ERR! TypeError: Cannot read property 'build' of undefined

See Failure Log section below for more details.

Expected Behavior

Storybook can start successfully.

Unclear if this is a regression as this is the first time I'm using an Nx workspace as opposed to an Nx Angular workspace.

Steps to Reproduce

1. npx create-nx-workspace
2. Select _empty_ workspace
3. Add nrwl/angular and storybook packages
4. Create an angular app
5. Run the storybook configuration
6. npx nx run myapp:storybook

Failure Logs

> nx run myapp:storybook 
info => Loading presets
info => Loading presets
info => Loading 1 config file in "apps/myapp/.storybook"
info => Adding stories defined in "apps/myapp/.storybook/main.js"
info => Found custom tsconfig.json
info => Using angular project 'myapp' for configuring Storybook.
ERR! TypeError: Cannot read property 'build' of undefined
ERR!     at getLeadingAngularCliProject (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/angular-cli_config.js:91:39)
ERR!     at Object.getAngularCliWebpackConfigOptions (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/angular-cli_config.js:99:19)
ERR!     at Object.webpackFinal (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:8:56)
ERR!     at /mnt/c/eHana/git/nx/g/g/node_modules/@storybook/core/dist/server/presets.js:259:28
ERR!  TypeError: Cannot read property 'build' of undefined
ERR!     at getLeadingAngularCliProject (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/angular-cli_config.js:91:39)
ERR!     at Object.getAngularCliWebpackConfigOptions (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/angular-cli_config.js:99:19)
ERR!     at Object.webpackFinal (/mnt/c/eHana/git/nx/g/g/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:8:56)
ERR!     at /mnt/c/eHana/git/nx/g/g/node_modules/@storybook/core/dist/server/presets.js:259:28

Environment

$  npx nx report

>  NX  Report complete - copy this into the issue template

  Node : 12.19.0
  OS   : linux x64
  npm  : 6.14.8

  nx : Not Found
  @nrwl/angular : 11.0.4
  @nrwl/cli : 11.0.4
  @nrwl/cypress : 11.0.4
  @nrwl/devkit : 11.0.4
  @nrwl/eslint-plugin-nx : 11.0.4
  @nrwl/express : Not Found
  @nrwl/jest : 11.0.4
  @nrwl/linter : 11.0.4
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.0.4
  @nrwl/web : Not Found
  @nrwl/workspace : 11.0.4
  typescript : 4.0.5

Other Notes

Error appears to occur since it is looking for an architect property within the workspace.json however this appears to have been renamed to targets. Note, renaming targets back to architect within workspace.json does fix the issue. However, it is unclear if this will cause problems for other Nx systems.

Based on my testing so far (running an Angular app, linting, and jest tests) renaming the property back to architect has not had any issues but I assume this was renamed for a purpose so I can't be sure that this is a good long term fix.

[vsavkin]

Thanks for submitting the issue!

You you change the configuration version property to 1 (line 2 of workspace.json) and run nx format, you will get the old version of the configuration. You just need to do it once. Everything should work after that.

We support the Angular CLI configuration (Nx can run with angular.json). Everything that requires Angular CLI should work in this case. It's basically an Angular CLI project.

If you are using an Nx workspace without the Angular CLI (workspace.json instead of angular.json), not everything that would work in the Angular CLI will work here. It's not an Angular CLI project any more. We do our best to make sure as much as possible works. We provide a custom host for schematics that converts workspace.json to angular.json on the fly and converts it back etc., but the Angular storybook integration doesn't work.

The reason to have a different config format is that the Angular CLI configuration doesn't work well for large workspaces. The angular.json file should not be the place where 1000 projects are configured.

In Q1 we will allow project configuration to be located within the project's folder. The change required in the Angular Storybook is actually small, so if the folks there are happy to receive a PR, we will send one.

As a side note, the Angular team started work on making the config customizable. But the API was convoluted, so the Angular CLI doesn't use the API consistently, and no tool I know of uses it well either.

@mandarini @juristr can we ping the storybook folks to see if they are happy to receive a PR?

[nzacca]

@vsavkin

Thank you for the follow up, explanation, and workaround. I appreciate the insight.

We switched to a non-Angular workspace with the intent on supporting non-Angular libraries/projects alongside our Angular projects. We use storybook a lot so this was something we noticed right away. I have no issues with swapping the version back to v1 while we await the upcoming features in Q1 as you mentioned. Thank you for this tip.

Lastly, may I take a moment to applaud your engagement and responsiveness with the community. The team at Nrwl has done an excellent job at communicating and fielding questions from us. My hope is that other community projects take inspiration from, and lead with, this level of professionalism and engagement. I know my team and I certainly will.

Cheers!

[tommyc38]

@vsavkin - This maybe a separate issue, but I am getting a different error in the same step. See below:

info => Loading custom manager config
info => Loading presets
info => Loading presets
info => Loading 1 config file in "libs/core/.storybook"
info => Loading 2 other files in "libs/core/.storybook"
info => Found custom tsconfig.json
info => Loading custom manager config
info => Using angular project 'core' for configuring Storybook.
ERR! architect.build is not defined for project 'core'.
info => Loading angular-cli config.
info => Loading custom Webpack config (full-control mode).

Note that angular project 'core' is an Angular library so it won't have a build property in (e.g.project.core.architect) in angular.json

[tommyc38]

Sorry, my issue above was due to the fact that I changed my default project to a library instead of an application. Once I changed the default to an application everything worked as it should. I looked through the documentation and It maybe worth mentioning for Angular users how storybook/webpack bootstraps via the default project.

[hiepxanh]

this issue relate to this PR https://github.com/nrwl/nx/pull/4099 which is fix Storybook always using default project as target
p/s: which is still not merged yet, after 1 month 10 days :D

[mandarini]

@vsavkin I'll reach out to the Storybook folks.

@hiepxanh I'll try to take a look at your PR.
I see it was created 1 month and 10 days ago, but in the meantime it needed revisions, and then there was the Christmas period, which is usually when people who would be reviewing PRs are taking some time off! I see you updated your PR 7 days ago, so all I'm saying is that we're doing our best to catch up with your PRs! :)

[hiepxanh]

thank you, happy new year :D hope you safe and heathy ❤️