Storybook: @storybook/addon-info handle Fragment propType

[emjaksa]

Describe the bug
There are two issues relating to this when using @storybook/addon-info and Fragment. Both issues are caused by prop type checking.

1. When you use react Fragment in a story and because it is a Symbol you get the following error in the console. TableComponent expects a component as a Function.

Failed prop type: Invalid prop `type` of type `symbol` supplied to `TableComponent`, expected `function`

1. Try exclude Fragment using propTablesExclude and you get the following error. The first error does disappear if you exclude it.

checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `propTablesExclude[0]` of type `symbol` supplied to `Story`, expected `function`.

To Reproduce

1. Use Fragment in a story

import React, { Fragment } from 'react'
import MyComponent from './MyComponent'

storiesOf('My Component', module).add('default', () => (
    <Fragment>
      <MyComponent />
      <MyComponent />
    </Fragment>
  ))

1. Try use propTablesExclude to exclude Fragment

import React, { Fragment } from 'react'
import MyComponent from './MyComponent'

storiesOf('My Component', module)
  .addParameters({
    info: {
      propTablesExclude: [Fragment],
    },
  })
 .add('default', () => (
    <Fragment>
      <MyComponent />
      <MyComponent />
    </Fragment>
  ))

Expected behavior
No console errors.

System:

• OS: MacOS
• Device: Macbook Pro 2017
• Browser: chrome
• Framework: react
• Addons: @storybook/addon-info
• Version: v5.0.2

Additional context
If I get a chance I will try create a pull request to add prop type check for Fragment

[emjaksa]

Same issue if you use react context Provider and Consumer components

[dsanders1234]

We are seeing an issue that seems to be related to this issue.

In PropVal.js line 231:
<span style={valueStyles.object}> {<${val.type.displayName || val.type.name || val.type} />} </span>
Where val is: Symbol(react.fragment)

We get this exception:
TypeError: Cannot convert a Symbol value to a string
at String.concat ()
at PropVal ...

[tuchk4]

Faced this issue in 5.0.3 with these addons together. If use separately - everything is ok.

addDecorator(addReadme);
addDecorator(withInfo);

[Rohanhacker]

@tuchk4 I changed the order of decorators and it worked for me.

addDecorator(withInfo);
addDecorator(addReadme);

[lednhatkhanh]

Doesn't use any of those addons and still face the issue

[jasperdunn]

I'm also getting this issue

using in config.js

addDecorator(withKnobs);

addDecorator(withInfo({ inline: true }));

[objHua]

+1
package.json:
"@storybook/addon-actions": "^5.0.7", "@storybook/addon-info": "^5.0.7", "@storybook/addon-knobs": "^5.0.7", "@storybook/addon-links": "^5.0.7", "@storybook/addon-options": "^5.0.7", "@storybook/addons": "^4.1.17", "@storybook/react": "^5.0.7",

config.js

import { withInfo } from '@storybook/addon-info'; addDecorator(addReadme); addDecorator(withInfo({ inline: true }));

stories.js
storiesOf('文档', module).add('组件开发指南', () => null, { info: { text:test test, } });

[ericsoco]

Also see this issue with a <React.Fragment> wrapping the contents of my story. Changing to a <div> instead eliminates the error. [email protected].

[stale[bot]]

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]]

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!

[sw-yx]

not inactive. same issue here

[shilman]

@sw-yx Any interest in kicking the tires on SB Docs? It's designed to replace addon-info, supports stories with fragments like the one at the top of this issue, and the code is 100x cleaner so I can turn around fixes pretty quickly if needed.

Here's the project overview: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

Here's a sample of what you can do with it with a few lines of code: https://storybook-design-system.netlify.com/

And here's the guide to get started with the current alpha: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

On top of all this, it also supports writing stories in MDX, based on your original suggestion last year https://github.com/storybookjs/storybook/issues/3379

[sw-yx]

i'm interested, but also i need to upgrade an existing tutorial/codebase that uses addon-info 😅

will try this out at some point just not right now. looks good tho

[damianmr]

I just wanted to mention that the very same issue drove me crazy for a couple of hours.

I'm using a fragment as prop of a parent component. Something of the form:

<SomeComponent extraComponents={
  <Fragment>
    <Comp1/>
    <Comp2/>
    <CompN/>
  </Fragment>
}>
  {/* Children components in normal state */}
</SomeComponent>

And I see the same error message as above.

Removing the withInfo decorator from config.js allowed the very same code to run without problems. Changing the order of the decorators as suggested in other comment didn't work for me (though docs says it should be the first add on to be used by Storybook).

@shilman thank you very much for all the work, do you think is a good idea to put some sort of warning in the code and/or in the README file? I'm assuming the way to go now is using the new docs addon. Although the warning in the README wouldn't have helped me in my case, as I just joined the project and wouldnt' have noticed it, a deprecation message in the console would have certainly caught my attention.

[shilman]

@damianmr Unfortunately addon-info doesn't really have a maintainer right now. I'm happy to review a PR on documenting it better. Otherwise the best bet is to hope that people will find these github issues which also serve as "auxiliary documentation" indexed by Google and the like. 🤷‍♂

[stale[bot]]

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]]

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!