nx: Storybook fails to launch without a default project

Current Behavior

If workspace.json does not set a default project, launching storybook after running nx g @nrwl/angular:storybook-configuration project-name results in the following error

> nx run <project>:storybook 
Cannot read property 'targets' of undefined

See https://github.com/nrwl/nx/blob/master/packages/storybook/src/executors/utils.ts#L188 and https://github.com/nrwl/nx/blob/master/packages/storybook/src/executors/utils.ts#L212, where defaultProjectName ends up being undefined.

Expected Behavior

Launch storybook after initial configuration without additional modifications to workspace project configuration.

Steps to Reproduce

Setting projectBuildConfig string equal to the name of the respective project in configuration (https://nx.dev/p/a/storybook/build#projectbuildconfig) seems to resolve.

Failure Logs

Environment

npx nx report            

>  NX  Report complete - copy this into the issue template

  Node : 12.22.7
  OS   : linux x64
  yarn : 1.22.17
  
  nx : 13.3.0
  @nrwl/angular : 13.3.0
  @nrwl/cli : 13.3.0
  @nrwl/cypress : 13.3.0
  @nrwl/devkit : 13.3.0
  @nrwl/eslint-plugin-nx : 13.3.0
  @nrwl/express : undefined
  @nrwl/jest : 13.3.0
  @nrwl/linter : 13.3.0
  @nrwl/nest : 13.3.0
  @nrwl/next : undefined
  @nrwl/node : 13.3.0
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.0
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.0
  @nrwl/storybook : 13.3.6
  @nrwl/gatsby : undefined
  typescript : 4.5.3
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
  	 @angular/animations: 13.1.0
  	 @angular/cdk: 13.1.0
  	 @angular/common: 13.1.0
  	 @angular/compiler: 13.1.0
  	 @angular/core: 13.1.0
  	 @angular/forms: 13.1.0
  	 @angular/material: 13.1.0
  	 @angular/platform-browser: 13.1.0
  	 @angular/platform-browser-dynamic: 13.1.0
  	 @angular/platform-server: 13.1.0
  	 @angular/router: 13.1.0
  	 angular-auth-oidc-client: 11.6.8
  	 angular-datatables: 9.1.1
  	 @angular-devkit/build-angular: 13.0.4
  	 @angular/cli: 13.0.4
  	 @angular/compiler-cli: 13.1.0
  	 @angular/language-service: 13.1.0
  	 @storybook/angular: 6.4.9

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 22 (15 by maintainers)

Most upvoted comments

I meant that we’re running e2e tests and storybook like this: nx e2e storybook-app-e2e. And before e2e tests started, it tries to start storybook. It means that I need to pass --projectBuildConfig there somehow.

But I found solution, you need to pass projectBuildConfig to storybook options

"storybook": {
  "builder": "@nrwl/storybook:storybook",
  "options": {
    "uiFramework": "@storybook/angular",
    "port": 4400,
    "config": {
      "configFolder": "apps/storybook-app/.storybook"
    },
    // Here
    "projectBuildConfig": "storybook-app:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

Would recommend at least a doc update, since it took me spinning up a debugger and tracking down the lines mentioned in my initial message to understand why this was failing. None of the getting started docs made any mention about default project setups, and the error caused is not obvious. The better solution in my mind is to just assume the projectBuildConfig value should be automatically set to the target project used when running the command if it’s not set, using the default project, even if available, as the default doesn’t make sense to me if I’m already launching using a specific project config.

I recently had a similar issue. In the source code of Storybook I found a hint, that one can set an environment variable to set the Angular Project which would be used.

Have you tried this out?

https://github.com/storybookjs/storybook/blob/7e76929f8dcb89eff01ec6990350a22ca3a7f97b/app/angular/src/server/angular-read-workspace.ts#L50

https://storybook.js.org/docs/angular/configure/environment-variables

Maybe creating a .env file inside the .storybook folder with the variable STORYBOOK_ANGULAR_PROJECT=<project> could fix the issue?

I’ve been fighting the same problem the last few weeks off and on, which made me unable to finalize my move to Angular 13 because of it. I’ve been meaning to open an issue, but just haven’t gotten around to it (End of year tasks am I right ;D)

If workspace.json does not set a default project

To go further on this, if you do set the defaultProject within nx.json, you get another vague error:

> nx run <project>:storybook 
Cannot read property 'executor' of undefined

You’ll see a similar error if you are try to pass in the projectBuildConfig name for your project, so something like:

> nx run my-project:storybook --projectBuildConfig=my-project
Cannot read property 'executor' of undefined

The only way I figured out how to make it work is by changing the target from storybook to build, so in your project.json (or where-ever your config file is for the project your using storybook with) you have to change:

{
  "storybook": {
    "executor": "@nrwl/storybook:storybook",
    //...
  }
}

to:

{
  "build": {
    "executor": "@nrwl/storybook:storybook",
    //...
  }
}

if your already using build then I have no idea how this is suppose to work, as it seems like both branches of the above code referenced in the original issue try to force some form of :build target?

I personally just duplicated my storybook target as a build one in-case this ever gets fixed/changed.

Nevermind I realized you can just do:

nx run project-name:storybook --projectBuildConfig=project-name:build-storybook

I’m sure there is a less convoluted way to execute this though, but I wanted to document whatever I got working for any poor soul who runs into this ;D

In my setup (that worked a while ago but doesn’t anymore), the build (for a non-buildable lib) fails because as I understand it, the tsconfig from the build project is not used. So some ts files (here polyfills.ts) are not included in the build. So I get:

apps/webapp/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Adding the build app files by hand in the storybook tsconfig fixes the issue, but it sure feels like a hack.

Did you run into that in the setup above also, if not why?

I’m working on that doc, and a more helpful error 🙃 @nick-allen

Hi all! Can I close this issue, since it’s not really a bug?

Thank you very much @bradtaniguchi for the detailed steps and fix, and thank you very much @pkirchniawy for the extra tip! Let me know if you try it out and it works, maybe we can try and add the functionality at some point? 😃 ❤️