Storybook fails to launch without a default project

[nick-allen]

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

[mandarini]

Hi there @nick-allen ! Thanks for filing an issue!

I will refer you to this comment in this issue here.

Storybook has always relied on the default project for Angular to get its build configuration, so the behaviour you experienced is not a bug, it's by design.
What you can do, is use the projectBuildConfig flag to specify the target project of which to use build config for when running Storybook.

So please, let me know if I can close this issue, if this makes sense!

[bradtaniguchi]

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

[pkirchniawy]

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= could fix the issue?

[mandarini]

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? :) <3

[mandarini]

So, to recap, yes, if you're on an Angular project working with Storybook and you're having trouble running Storybook, you can do the following:

For buildable projects

That means: for apps, buildable libs, projects that have the build target in their architect or targets in angular.json or project.json

Run you app like this:

nx storybook <YOUR-APP-NAME> --projectBuildConfig=<YOUR-APP-NAME>

For non-buildable projects

Or for non buildable projects, projects that do NOT have the build target in their architect or targets in angular.json or project.json

Run your app like this:

nx storybook <YOUR-APP-NAME> --projectBuildConfig=<YOUR-APP-NAME>:build-storybook

Notice how here we are explicitly passing the build-storybook target!

[nick-allen]

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.

[mandarini]

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

[mandarini]

Linking this for reference #8255

[qortex]

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?

[vincentB23]

Does the projectBuildConfig flag only work for projects with projectType "library"?
I have 2 projects which use Storybook, one is a library and the other an application.

When providing the --projectBuildConfig flag to the library, it works. When I provide the flag to the application type, it does not change anything...

I then changed the application type to the library type, and then it did change the angular project on build.

[mandarini]

@vincentB23 ! That's strange. I just tried it for an app, and it works for me.

I removed the "defaultProject" from my nx.json.

My app name is web and I ran:

nx storybook web --projectBuildConfig=web

and it got the projectBuildConfig, and I could run Storybook.

Can you share with me the error you got in the console?

[nick-allen]

@vincentB23 I had this setup and working as an application only, hadn't messed with a lib at all to this point, and was able to get it to run with just the projectBuildConfig addition to workspace.json.

[mandarini]

Hi @qortex ! I see you solved the polyfill.js issue (storybookjs/storybook#16977 (comment)). I'll keep this open until we have a fix for that, too.

[BOBRIWE]

Hi, I'm not sure, but I think you forgot one more case - @nrwl/storybook:cypress-project. We have cypress tests for storybook, and we just realized that storybook builds default application for some reason (it's not needed actually), and it started failing because of memory allocation error. How I can specify projectBuildConfig in this case, when storybook starts with e2e tests?

[mandarini]

@qortex @vincentB23 @nick-allen
For non buildable projects (eg. libs), projects that do NOT have the build target in their architect or targets in angular.json or project.json

Run your app like this:

nx storybook <YOUR-PROJECT-NAME> --projectBuildConfig=<YOUR-PROJECT-NAME>:build-storybook

Notice how here we are explicitly passing the build-storybook target!

[mandarini]

@BOBRIWE can you please try above solution in a similar way, and let me know if it works?

[mandarini]

These are temporary workarounds, we'll come up with a concrete solution - either console suggestions, or something similar.

[mandarini]

Command suggestion PR

[BOBRIWE]

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
    }
  }
},

[mandarini]

I have this PR under way, we want to review it a bit more and make sure it makes sense in all scenarios. But the purpose would be to automatically use the current project's build configuration.

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