Storybook: @storybook/addon-info wont run as expected

[wanbinkimoon]

The Problem

Adding Info to the story cause this error

Expecting a valid React element from the story: "with text" of "Button".
Seems like you are not returning a correct React element from the story.
Could you double check that?

The react element is perfectly working whitout this plugin.

My code

I imported addon-info in my ./storybook/config.js

import {addDecorator, configure} from '@storybook/react';
import {setIntlConfig, withIntl} from 'storybook-addon-intl';
import {withInfo} from '@storybook/addon-info';

// Load the locale data for all your defined locales
import {addLocaleData} from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';

addLocaleData(enLocaleData);
addLocaleData(deLocaleData);

// Provide your messages
const messages = {
  en: {'button.label': 'Click me!'},
  de: {'button.label': 'Klick mich!'},
};

const getMessages = locale => messages[locale];

// Set intl configuration
setIntlConfig({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  getMessages,
});

// Register decorator
addDecorator(withIntl);
addDecorator(withInfo);

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

And then i used the {info: 'string'} as showed in the example

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

import Button from '../app/components/Button';

storiesOf('Button', module)
  .add(
    'with text',
    () => (
      <Button
        fontZ={'16px'}
        bgColor={'purple'}
        color={'white'}
        label={'pippo'}
      />
    ),
    {info: 'test'}
  )

Those are the packages I'm using.

@storybook/addon-info": "^3.4.7
@storybook/react": "^3.4.7

[Keraito]

Hey @wanbinkimoon, the documentation on the master branch is for the alpha release of Storybook. The way addons are used on alpha have been changed to the way that you're trying, but those changes haven't made it to the stable release yet. You can do two things now, either upgrade your storybook dependencies to v4.0.0-alpha.9 or follow the guidelines for stable release at https://github.com/storybooks/storybook/tree/release/3.4/addons/info.

Sorry for the confusion in the documentation, this will be addressed in the near future.

[Keraito]

Closing this issue as everything seems clear.

[brunoreis]

@Keraito, thanks for the clarification.

This is a fantastic project, although I run into a lot of issues today due to this confusion. After installing 4.0.0-alpha.16 and corresponding version add ons things normalized here.

Please consider adding an alert on the actual documentation clarifying this until you launch version 4 because that almost drove me out of this great project and I'm sure it could drive some other people too.