addon-info: prop descriptions are empty with CRA

[sealightPT]

The prop descriptions don't show for my React App components.
The App was created with CRA and it's not ejected.

Example:

/** Displays a country flag */
class Flag extends React.Component {
    render() {
        return <img (...) />
    }
}

Flag.propTypes = {
    /** Flag country code */
    code: PropTypes.string.isRequired,
    /** Alternative text */
    alt: PropTypes.string,
    /** Width size */
    width: PropTypes.number,
    /** Height size */
    height: PropTypes.number
};

my package.json devDependencies are:

"devDependencies": {
    "@storybook/addon-actions": "^5.0.0-rc.6",
    "@storybook/addon-info": "^5.0.0-rc.6",
    "@storybook/addon-links": "^5.0.0-rc.6",
    "@storybook/addon-notes": "^5.0.0-rc.6",
    "@storybook/react": "^5.0.0-rc.6",
    "babel-loader": "8.0.5",
    "babel-plugin-react-docgen": "^2.0.2"
  }

[sealightPT]

This problem still exists with
"@storybook/addon-info": "^5.0.1"
and
"react-scripts": "^2.1.8"

[alexandrecanuto]

Having the same problem here.

[nnquangit]

Storybook 5.0.5 not use babel config in .storybook folder. All plugins like: storybook-readme, @storybook/addon-info will not detect Component.__docgenInfo. So propTypes always empty.

Try update webpack config

config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["@babel/env", "@babel/flow", "@babel/react",],
                plugins: ["react-docgen", "@babel/plugin-proposal-class-properties"]
            }
        }
    });

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mrmckeb]

The solution that @nnquangit has suggested is good, but I'd suggest you just need to add to plugins, under options - as opposed to adding a whole rule.

I'm not sure what the best way to approach this is, as with CRA we use the CRA config - and don't necessarily want people to add to provide their own Babel configs. I'm definitely open to any ideas here :)

[shilman]

@mrmckeb can you provide an example?

[mrmckeb]

Yes, sorry - good thought @shilman - you can see an example of how we do it internally here:
https://github.com/storybooks/storybook/blob/074d0f36da88d740167b1a033d63396e6f04af0b/app/react/src/server/cra-config.js#L172

This is part of PR #5308.

So instead of:

    config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["@babel/env", "@babel/flow", "@babel/react",],
                plugins: ["react-docgen", "@babel/plugin-proposal-class-properties"]
            }
        }
    });

You would do this (I didn't test, but it should be close enough):

const babelRule = config.module.rules.find((rule) => rule.use && rule.use.loader === 'babel-loader');
const otherRules = config.modules.rules.filter((rule) => rule === babelRule);
config.module.rules = [
  ...otherRules,
  {
    ...babelRule,
    use: {
      ...babelRule.use,
      options: {
        ...babelRule.use.options,
        plugins: ['react-docgen', ...babelRule.use.options.plugins],
      },
    }.
  }
];

// Or, if you like to mutate...
const babelRuleIndex = config.module.rules.findIndex((rule) => rule.use && rule.use.loader === 'babel-loader');
config.module.rules[babelRuleIndex].use.options.plugins.push('react-docgen');

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!