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)
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--projectBuildConfigthere somehow.But I found solution, you need to pass
projectBuildConfigto storybook optionsWould 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
projectBuildConfigvalue 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)
To go further on this, if you do set the
defaultProjectwithinnx.json, you get another vague error:You’ll see a similar error if you are try to pass in the
projectBuildConfigname for your project, so something like:The only way I figured out how to make it work is by changing the target fromstorybooktobuild, so in yourproject.json(or where-ever your config file is for the project your using storybook with) you have to change:to:
if your already usingbuildthen 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:buildtarget?I personally just duplicated mystorybooktarget as abuildone in-case this ever gets fixed/changed.Nevermind I realized you can just do:
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
tsconfigfrom the build project is not used. So sometsfiles (herepolyfills.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
tsconfigfixes 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? 😃 ❤️