Storybook: [3.3.3, addon-info] Incorrect parse props with babel-plugin-flow-react-proptypes

Created on 28 Dec 2017 · 6Comments · Source: storybookjs/storybook

Issue details

OneOfType and ArrayOf try to get propType.value but only have propType.elements.

Uncaught TypeError: Cannot read property 'length' of undefined
    at OneOfType (OneOfType.js:21)

The above error occurred in the <OneOfType> component:
    in OneOfType (created by PrettyPropType)
    in PrettyPropType (created by PropTable)
    in td (created by glamorous(td))
    in glamorous(td) (created by PropTable)
    in tr (created by PropTable)
    in tbody (created by PropTable)
    in table (created by glamorous(table))
    in glamorous(table) (created by PropTable)
    in PropTable
    in Unknown (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in Story

Steps to reproduce

Use babel-plugin-flow-react-proptypes and union prop:

type Props = {
  unionProp: 'one' | 'two',
};

class A extends Component<Props> {}

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 3.3.3
@storybook/addon-info 3.3.3
react 16.2.0
flow-bin 0.62.0
babel-plugin-flow-react-proptypes 13.0.1

info bug merged

Source

DimaRGB

👍1

Most helpful comment

can confirm. it also throws the same error without using babel-plugin-flow-react-proptypes though.

after some testing, i can boil it down to:

// component.js
// @flow
import React from 'react';

type Props = {
  someValue?: 'one' | 'two' | 'three',
};

const SomeComponent = (props: Props) => <span>hey there</span>;

export default SomeComponent;

// mystory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import SomeComponent from './component';

storiesOf('Example', module).add('error', () => <SomeComponent />); // afforementioned exception

or, in other words, have a component file with flow typing and union type (if story and component are declared in the same module, it'll work fine), try to render a story with this component and it'll throw.
if the component is being wrapped within another component in the story file, it'll also work (probably because addon-info doesnt look for proptypes recursively?), i.e.:

// mystory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import SomeComponent from './component';

const Proxy = () => <SomeComponent />;

storiesOf('Example', module).add('error', () => <Proxy />); // no error. also, no prop types

tobilen on 3 Jan 2018

👍5

All 6 comments

can confirm. it also throws the same error without using babel-plugin-flow-react-proptypes though.

after some testing, i can boil it down to:

// component.js
// @flow
import React from 'react';

type Props = {
  someValue?: 'one' | 'two' | 'three',
};

const SomeComponent = (props: Props) => <span>hey there</span>;

export default SomeComponent;

// mystory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import SomeComponent from './component';

storiesOf('Example', module).add('error', () => <SomeComponent />); // afforementioned exception

// mystory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import SomeComponent from './component';

const Proxy = () => <SomeComponent />;

storiesOf('Example', module).add('error', () => <Proxy />); // no error. also, no prop types

tobilen on 3 Jan 2018

👍5

Any progress on this issue ?