Storybook: addon-notes causes story to not render and shows error instead

Created on 18 Apr 2018 · 10Comments · Source: storybookjs/storybook

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Using addon-notes causes story to not render. Instead it renders an error "Expecting a valid React element from the story...Seems like you are not returning a correct React element from the story.
Could you double check that?"

Steps to reproduce

Steps to reproduce:

Here is a link to a repository where I have recreated the problem: https://github.com/terrencewwong/storybook-addon-notes-example

To summarize, this is what I did:

install react, react-dom, storybook, and addon-notes
follow the setup instructions for addon-notes
write a simple story that uses the notes addon

This is the code for the story that is in the repo I linked:

import React from 'react';
import { storiesOf } from '@storybook/react';

const Component = () => <div>Hello</div>

storiesOf('Component', module)
    .add('default', () => <Component />, { notes: 'A very simple component' });

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

@storybook/react v3.4.2
@storybook/addon-notes v3.4.2

notes question / support

Source

terrencewwong

Most helpful comment

I got the same error as shown above, but the problem was the incorrect documentation (using withNotes as example).
I am using "@storybook/react": "^3.4.8" together with "@storybook/addon-notes": "^3.4.8".

The docs say

storiesOf('Button', module).add('with some emoji', () => (
     withNotes('A very simple component')(() =>
        <Button onClick={action('clicked')}>
            <span role="img" aria-label="so cool">😀 😎 👍 💯</span>
        </Button>
    )); // <= there is a bracket too much, I believe ;)
));

But the addon's docs say

storiesOf('Component', module).add(
    'with some emoji',
    withNotes('A very simple component')(() => <Component />)
)

So in storybook's documentation the 2nd argument is incorrectly wrapped in a function, I guess.

jneuendorf on 31 Jul 2018

🎉2 👍2 ❤1

All 10 comments

Notes as object feature is only in 4.0.0-alpha.3 version.
Here are the docs for the stable version: https://github.com/storybooks/storybook/tree/release/3.4/addons/notes

Hypnosphi on 18 Apr 2018

Ah sorry that's correct. Thank you!

terrencewwong on 18 Apr 2018

The docs say

storiesOf('Button', module).add('with some emoji', () => (
     withNotes('A very simple component')(() =>
        <Button onClick={action('clicked')}>
            <span role="img" aria-label="so cool">😀 😎 👍 💯</span>
        </Button>
    )); // <= there is a bracket too much, I believe ;)
));

But the addon's docs say

storiesOf('Component', module).add(
    'with some emoji',
    withNotes('A very simple component')(() => <Component />)
)

So in storybook's documentation the 2nd argument is incorrectly wrapped in a function, I guess.

jneuendorf on 31 Jul 2018

🎉2 👍2 ❤1

Fair point @jneuendorf, would you like to send a PR?

Hypnosphi on 1 Sep 2018

@Hypnosphi On my way to the PR I noticed, that the docs have already changed significantly: apparently the addons API has changed and already been applied to the docs (see d1d8138fa7d10cc3defb07cb7d94f04ae03faedd by @tmeasday).

So now the question has become:
Why is this not reflected on https://storybook.js.org/addons/using-addons/ ?

Looking through the package.json I assume one of these commands must be run in order to deploy the latest docs:

docs:build
docs:deploy:ci
docs:deploy:manual
docs:dev

jneuendorf on 2 Sep 2018

@jneuendorf - this is because master of this repository is for the v4 version of storybook which has not yet been released (so the docs are not in sync with it).

You could submit a fix on the release-3.4 branch (which controls the currently active docs) if you are feeling keen, or just wait for v4, where as you say the problem will resolve itself!

tmeasday on 5 Sep 2018

👍1

@tmeasday Sorry I didn't think of that. Can you guess how long it'll take until v4 is released? If it's likely still a while I'm gonna create a PR.

jneuendorf on 5 Sep 2018

@jneuendorf I'm not totally sure -- @ndelangen? I would say at least a couple of weeks. Haven't done an rc yet.

tmeasday on 6 Sep 2018

I think it's worth fixing the docs, would really appreciate that PR @jneuendorf!