Storybook: Knobs Addon throws propType warnings, creates array for boolean.

Created on 12 Jun 2017  路  5Comments  路  Source: storybookjs/storybook

I am currently upgrading the project I am working on to @storybook/[email protected] (latest).
We are heavily using the addon-knobs addon, which now is behaving a little strange. I get many prop type warnings like this one:

Warning: Failed prop type: Invalid prop `knob.value` of type `boolean` supplied to `BooleanType`, expected `string`.
    in BooleanType

I am currently running [email protected] with all @storybook projects with their latest version.

I also was able to reproduce this, when running the example given in ./addons/knobs against the master. It results in the same "Invalid propt ... expected string" warnings for DateType, BooleanType, ArrayType and ObjectType.

Additionally the boolean value becomes an array, when refreshing the page.
Given the following story:

const stories = storiesOf('Button', module);
stories.addDecorator(withKnobs);

stories.add('can be disabled', () => {
    const disabled = boolean('disabled', false);
    console.log(disabled);

    return (
        <Button
            disabled={disabled}
        >
            I am disabled
        </Button>
    )
});

The console.log prints:

# after initial load:
false
# after clicking on "disabled" checkbox
true
# after page refresh
["true"]

..which of course also results in a prop type warning.

To make it easier to reproduce the issue, I created a minimal setup which you can simply clone:

https://github.com/jkempff/storybook-addon-knobs-proptypes-issue

knobs bug

Most helpful comment

Here we go, this should fix it :)

Also thanks @jkempff for easy to reproduce case. 馃憤

All 5 comments

just to add to this, it seems to get rendered a couple times, the first few times being as i'd expect (i.e. not an array, but a boolean).

The following output is with the following, which i would have expected to get called only once:

  console.log(boolean('fastTrack', props.fastTrack), props.fastTrack)

screen shot 2017-06-13 at 12 05 26

Hey,
Looks like when one of contributors updated lint rules he accidentally added these issues.
Sorry about that one.

Here we go, this should fix it :)

Also thanks @jkempff for easy to reproduce case. 馃憤

@alexandrebodin reopening since we have not released this yet. thanks!

@jkempff @peter-mouland @alexandrebodin @Gongreg Fix for this has been released in 3.1.5. Please let me know if you're still having this problem.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shilman picture shilman  路  3Comments

tlrobinson picture tlrobinson  路  3Comments

zvictor picture zvictor  路  3Comments

ZigGreen picture ZigGreen  路  3Comments

miljan-aleksic picture miljan-aleksic  路  3Comments