Storybook fails to execute when running in an Nx workspace

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.

[lqc]

Hi folks,

I run into this issue today. From what I understood, the PRs to storybook should have resolved the original issue and allow to use Storybook with Nx config (v2), but it still happened for me. I created a fresh project from Angular schematic with Nx 12. I also made sure I have latest Storybook (6.2.9) installed which includes the merged changes.

Could there be anything else that needs to be done?

[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