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

[terrencewwong]

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

[Hypnosphi]

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

[terrencewwong]

Ah sorry that's correct. Thank you!

[jneuendorf]

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.

[Hypnosphi]

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

[jneuendorf]

@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 d1d8138 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

[tmeasday]

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

[jneuendorf]

@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.

[tmeasday]

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

[Hypnosphi]

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

[terrencewwong]

Ah sorry that's correct. Thank you!

[jneuendorf]

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.

[Hypnosphi]

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

[jneuendorf]

@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 d1d8138 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

[tmeasday]

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

[jneuendorf]

@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.

[tmeasday]

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

[ndelangen]

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

[jneuendorf]

#4132 should do ;)