Controls not detecting our component props from propTypes or JSDoc (typescript) types

Describe the bug Hi there, sorry for the vague bug!

We’ve recently upgrade to Storybook 6.0 and we’re keen to migrate our stories from Knobs to Controls addon, and the other cool stuff in essentials based on the args pattern, e.g. automatic docs.

Our project uses React, so we’re using Storybook-react. The project is WooCommerce Blocks, and there’s an open PR dedicated to this: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3046

Our components include PropTypes declarations. Example component: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/51137ecb81da55c98cfc7bc5ed3dcd4e2aa75a8b/assets/js/base/components/quantity-selector/index.js

Note - we’re planning on migrating to JSDoc typescript declarations (in our JS files - we’re not using TypeScript lang). So if this is supported by Storybook we can switch to that. So far I can’t get either option to work - the controls don’t show up in Storybook unless I manually specify them via story.args prop.

Our project is quite complex and we have a custom webpack config. In the related branch / PR the webpack config is overridden using webpackFinal config prop.

With --debug-webpack I’ve confirmed that the react-docgen plugin is in the config:

  overrides: [
        {
          test: /\.(mjs|jsx?)$/,
          plugins: [
            [
              '/Users/haszari/_automattic/merch-repos/woocommerce-blocks/node_modules/babel-plugin-react-docgen/lib/index.js',
              {
                DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
              }
            ]

How can I debug where it’s going wrong, or ensure it has access to our prop declarations?

To Reproduce Sorry – I don’t have a minimal reproduce repo.

Expected behavior Hoping to get this working, again apologies for the open-ended bug report.

Ideally we can nail down the flow of data into react-docgen and document exactly what’s expected here, and how to diagnose problems.

System: Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-a11y: 6.0.20 => 6.0.20 
    @storybook/addon-essentials: 6.0.20 => 6.0.20 
    @storybook/addon-knobs: 6.0.20 => 6.0.20 
    @storybook/addon-links: 6.0.20 => 6.0.20 
    @storybook/addon-storysource: 6.0.20 => 6.0.20 
    @storybook/addons: 6.0.20 => 6.0.20 
    @storybook/react: 6.0.20 => 6.0.20 

Additional context

[mbustosp]

I might have a similar problem. After spending a full day researching and trying different things, nothing works and the automatic args table is not showing my components proptypes definitions.

I was mainly following these instructions: https://storybook.js.org/docs/ember/writing-docs/doc-blocks

I’ve put the whole code online (based on my client’s complex Stroybook config), with just a little bit of cleanup, and left only one story

https://github.com/yairEO/sb-args-table-not-showing

Files of interest:

• The Alert Component
• Alert Story
• babel config where I’ve disabled everything which is enabled in the “real” client’s code
• storybook main.js

Thanks to whoever shed light onto this mystery

I faced the same issue when I added a custom babel configuration in my application. After some debugging I realized storybook could not fetch the components’ proptypes because of this evaluation:

https://github.com/storybookjs/storybook/blob/7064642e1aee7786c77fe735c064c0c29dbcee01/addons/docs/src/lib/docgen/utils/docgenInfo.ts#L15

That means component.__docgenInfo is undefined or null.

How did I solve it?

Add these dependencies in your project

• react-docgen
• storybook-addon-react-docgen
• babel-plugin-react-docgen

Add the following addon in your storybook’s main.js

• storybook-addon-react-docgen

Add this plugin in your .babelrc

• react-docgen

Now I haven’t completely understood why storybook drops react-docgen when using a custom babel configuration file.

I hope to have shed some light 😉

[shilman]

@mbustosp potentially addressed here https://github.com/storybookjs/storybook/pull/15928