nx: React + Storybook - Props are missing / types of props are missing in docs when running with Nx

Current Behavior

Running nx run lib:storybook - Not all component props are displayed in Docs, both with CSF and MDX
Running start-storybook - Works as expected

Expected Behavior

Should be as same as Storybook’s result.

Steps to Reproduce

Clone the following repo
Run nx run ui:storybook - Go to Button docs and see that not all props are displayed, and the ones that are displayed, don’t have types.
Run cd libs/ui && start-storybook - Go to Button docs and see all props are displayed with types as expected.

Environment

  Node : 14.16.1
  OS   : darwin x64
  npm  : 7.19.0
  
  nx : 13.1.2
  @nrwl/angular : Not Found
  @nrwl/cli : 13.1.2
  @nrwl/cypress : 13.1.2
  @nrwl/devkit : 13.1.2
  @nrwl/eslint-plugin-nx : 13.1.2
  @nrwl/express : Not Found
  @nrwl/jest : 13.1.2
  @nrwl/linter : 13.1.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 13.1.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 13.1.2
  @nrwl/web : 13.1.2
  @nrwl/workspace : 13.1.2
  @nrwl/storybook : 13.1.2
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (16 by maintainers)

Most upvoted comments

I think our build problem is related to this issue https://github.com/storybookjs/storybook/issues/15336 But if upgrading storybook fixes it and it works with the latest version of nx I’m fine 😃

pataroka on Jun 3, 2022

@mandarini I compared the webpack config of both builds and it seems that the nx is missing a plugin. Cant’t tell which one as converting this to JSON removes the plugin names. Don’t know if it’s relevant, but it’s worth a try. Attached are the two config exports. webpack-config-comparison.zip

pataroka on Apr 1, 2022

Hey @mandarini Thanks for getting back to this. Indeed, it seems that something is missing during the type reading or it might be that Storybook uses different tools for it because you can see it’s not only the props that are missing, their type is not correct too. For example, you can add onClick in args, and it would show it in the props table as any or unknown while “pure” Storybook will show it as an event handler from React types.

Regarding your question - totally. In our repo, I have created a generator that creates a component together with a story with all the “common” props already populated in args. 😄

danr-za on Feb 4, 2022

Hi @danr-za ! Will get into it soon, sorry about that!!

mandarini on Jan 12, 2022