addon-info: Component.__docgenInfo not defined.

[konsumer]

I can't get the "description" field to show up in the PropType table in my project. I worked on #1030 with @bigassdragon and we had it working when all was done.

I tried with both methods to add info, and .__docgenInfo is undefined in both.

I did this in my config.js:

import { configure, setAddon } from '@storybook/react'
import infoAddon from '@storybook/addon-info'

setAddon(infoAddon)

window.STORYBOOK_REACT_CLASSES = {}

function loadStories () {
  require('../src/stories')
}

configure(loadStories, module)

and made stories that looked like this:

import React from 'react'

import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'

import Docs from './Docs'

storiesOf('Docs', module)
  .add('withInfo', withInfo('Heading here')(() => (<Docs name='David' />)))
  .addWithInfo('addWithInfo', 'Heading here', () => (<Docs name='David' />))

and Docs.js looks like this:

import React from 'react'
import PropTypes from 'prop-types'

/** A dumb component that says "hello" */
export const Docs = ({name}) => (<div>Hello {name}</div>)

Docs.propTypes = {
  /** the name of the person to say "hello" to */
  name: PropTypes.string
}

Docs.defaultProps = {
  name: 'World'
}

export default Docs

I tried class Docs extends React.Component style, too.

Still no "description" field in either story:

steps to reproduce:

npm i -g create-react-app @storybook/cli
create-react-app demo
cd demo
getstorybook
npm i -D @storybook/addon-info

Then I made changes, above.

[konsumer]

I am pretty sure this is caused by react-docgen not being setup like it used to be. If I manually add my own __docgenInfo, it displays correctly:

Docs.__docgenInfo = {
  'description': 'A dumb component that says "hello"',
  'methods': [],
  'props': {
    'name': {
      'type': {
        'name': 'string'
      },
      'required': false,
      'description': 'the name of the person to say "hello" to',
      'defaultValue': {
        'value': "'World'",
        'computed': false
      }
    }
  }
}

[ndelangen]

@danielduan Did this change recently?

[konsumer]

Honestly, I haven't really looked at it since it was working when I worked on it with @bigassdragon. I think it could be related to the move from @kadira to @storybook, but I'm not sure. If I look at the webpack config (in a custom config function) I don't see any of the react-docgen stuff I might expect, but I don't know what it used to look like.

[danielduan]

You actually don't need window.STORYBOOK_REACT_CLASSES = {} in your config.js. It's already provided inside the package https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/globals.js#L3

I'm guessing that might have cleared the docgen info.

[konsumer]

I tried it without, too.

[danielduan]

If you're using a custom webpack config, make sure that you're importing the storybook defaults as well if you're in full control mode. We've changed a good amount of the Webpack between v2 and now, you might not need a custom webpack file unless you're adding additional loaders.

The webpack config gets read here:
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config.js
And the babel config then gets injected with docgen here:
https://github.com/storybooks/storybook/blob/master/app/react/src/server/babel_config.js

Docs on webpack config:
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode-default

[konsumer]

No custom webpack-config (although I did try it with one in full-control mode.) Here is a project that demonstrates the issue. As I said, it's pretty much just a plain create-react-app with getstorybook.

[danielduan]

export const Docs = ({name}) => (<div>Hello {name}</div>) doesn't work unfortunately.

If you delete export, it should be okay. It's a bug in storybookjs/babel-plugin-react-docgen#33 with the React component detection. Feel free to submit a PR, we basically parse the AST to figure out if its an exported React component before sending it off to docgen for parsing.

Part of me wonders why we're even parsing the AST of the files in the babel plugin because react-docgen will reparse it again. I'm not sure we gain much from the performance boost either. Anyway, that's a whole separate issue.

[konsumer]

Yep, that fixed it. Thanks for the help! It's a bit frustrating though, because I like to export the Component (for unit-testing and storybook) and export the react-redux-wrapped version (for actual use in my application.) I generally do it like this:

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

/** A dumb component that says "hello" */
export const Docs = ({name}) => (<div>Hello {name}</div>)

Docs.propTypes = {
  /** the name of the person to say "hello" to */
  name: PropTypes.string
}

Docs.defaultProps = {
  name: 'World'
}

export const mapStateToProps = state =>({})

export default connect(mapStateToProps)(Docs)

I'll take a look and submit a PR over at babel-plugin-react-docgen. Thanks again!

[danielduan]

Yeah, you can export it after as a workaround, something like:

export default Docs
export { Docs }

Closing issue because this is really a docgen plugin problem. Please reopen if there's something else that hasn't been addressed.

[konsumer]

Thanks!

[konsumer]

I made a PR to change the behavior of the resolver but as @danez pointed out, the resolver is actually configurable, and there are a few built in (maybe findAllComponentDefinitions does what I want?) I propose that we use that as the default, instead. I like the idea of the default storybook doc-resolver grabbing all the exported stuff, but then using it's own "this is what this story is about" resolution to pick out the right doc object to actually show. I will do some experimentation with this and come back with a PR, if people like this idea.

[danielduan]

Think it's a good idea, let's keep the conversation in the other issue for the babel plugin.