Storybook: addon-info: prop descriptions are empty with CRA

Created on 26 Feb 2019 · 11Comments · Source: storybookjs/storybook

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

info cra has workaround inactive

Source

sealightPT

👍4

Most helpful comment

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"]
            }
        }
    });

nnquangit on 30 Mar 2019

❤5 🎉5 👍5 🚀3

All 11 comments

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

sealightPT on 12 Mar 2019

👍2

Having the same problem here.

alexandrecanuto on 13 Mar 2019

👍2

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"]
            }
        }
    });

nnquangit on 30 Mar 2019

❤5 🎉5 👍5 🚀3

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[bot] on 20 Apr 2019

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

mrmckeb on 21 Apr 2019

@mrmckeb can you provide an example?

shilman on 22 Apr 2019

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');

mrmckeb on 22 Apr 2019

❤1

stale[bot] on 13 May 2019

stale[bot] on 3 Jun 2019

stale[bot] on 26 Jun 2019

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!

stale[bot] on 26 Jul 2019

Was this page helpful?

0 / 5 - 0 ratings