withInfo Story Code and Component Gets Displayed As "b" Component

[vincelawdev]

I created a story file that imports multiple components. The story will work fine if I import just one component.

For example, I imported CurrencyField and TextField.

I expect the story source to display <CurrencyField> and <TextField> but I get <b> instead.

I also expect the Prop Types table to display <CurrencyField> and <TextField> but I get "b" Component instead.

Steps to reproduce

"@storybook/addon-a11y": "^3.4.11",
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-info": "^3.4.11",
"@storybook/addon-knobs": "^3.4.11",
"@storybook/addon-notes": "^3.4.11",
"@storybook/addon-options": "^3.4.11",
"@storybook/addon-viewport": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react": "^3.4.11",

Screenshots / Screencast / Code Snippets (Optional)

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import CurrencyField from './CurrencyField';
import TextField from './TextField';

const formFieldStory = storiesOf('Form Fields', module);

formFieldStory.addDecorator(withKnobs);

formFieldStory.add(
    'Text Field',
    withInfo('Text field. Use blurCallback prop to retrieve entered string.')(
        () => (
            <TextField
                id={text('ID', 'text-field1255763')}
                label={text('Label', 'Text Label')}
                tabIndex={number('Tab Index', 0)}
                disabled={boolean('Disabled', false)}
                placeholder={text('Placeholder', 'Some placeholder text')}
                defaultValue={text('Default Value', '')}
                maxLength={number('Maximum Number of Characters')}
                width={text('Width', '100%')}
                marginBottom={text('Margin Bottom', '0')}
            />
        )
    )
);

formFieldStory.add(
    'Currency Field',
    withInfo(
        'Currency field. Number gets formatted with commas after every 1000.'
    )(() => (
        <CurrencyField
            id={text('ID', 'currency-field123')}
            label={text('Label', 'Currency Label')}
            tabIndex={number('Tab Index', 0)}
            disabled={boolean('Disabled', false)}
            placeholder={text('Placeholder', 'Some placeholder text')}
            maxLength={number('Maximum Number of Characters')}
            min={number('Minimum Number')}
            max={number('Maximum Number')}
            width={text('Width', '100%')}
            marginBottom={text('Margin Bottom', '0')}
        />
    ))
);

[binomialstew]

I think this is the same issue.

You can set a displayName property on your components or set uglifyjs to not mangle.

[vincelawbc]

Thanks a lot. Using displayName worked.

Component.displayName = 'Component';

[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!