Expecting a react element from stories for global IntlProvider decorator

[sthuber90]

Hello,

I would like to use storybook for a component of mine which uses react-intl. Preferably I would use the storybook-addon-intl for that matter, which unfortunately doesn't seem to support the current version of storybook yet. So to be able to use storybook nonetheless I edited .storybook/config.js to:

import React from 'react';
import { configure, setAddon, addDecorator } from '@storybook/react';
import infoAddon from '@storybook/addon-info';
import { IntlProvider } from 'react-intl';

// add info addon
setAddon(infoAddon);

// add a decorator to wrap stories rendering into IntlProvider
const DEFAULT_LOCALE = 'en';
const DEFAULT_MESSAGES = require('../src/translations/locales/en')

addDecorator(story => {
  <IntlProvider locale={DEFAULT_LOCALE} key={DEFAULT_LOCALE} messages={DEFAULT_MESSAGES}>
     { story() }
  </IntlProvider>
})

//stories loader
const req = require.context('../src', true, /\.stories\.js$/)
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

// Run storybook
configure(loadStories, module);

The component I try to test / start with is Loading.storybook.js:

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

import '../styles/compiled-css/style.css';
import '../index.css';

//add a decorator to wrap stories rendering into IntlProvider
const DEFAULT_LOCALE = 'en';
const DEFAULT_MESSAGES = require('../translations/locales/en')

storiesOf('Loading', module)
  .add('default', () => (
     <Loading />
  ));

Unfortunately when running storybook I keep getting the error Expecting a react element for the story: "default" from "Loading".

Any idea why this is happening? I also reinstalled node_modules and checked that I don't use any storybook addon with old dependencies.

[trevoreyre]

Can we see the code for the Loading component?

[sthuber90]

I don't have it at hand, but the code looks like this:

import React from 'react';
import { FormattedMessage } from 'react-intl';

const Loading = () => {
	return (
		<div>
			<FormattedMessage id='loading' defaultMessage='Loading...' />
			<div className='spinner' />
		<div>
	)
}

export default Loading

The Loading component is working as expected when I start the app with npm start, just not within storybook. Furthermore when my config.js looks like this:

import React from 'react';
import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

// add info addon
setAddon(infoAddon);

//stories loader
const req = require.context('../src', true, /\.stories\.js$/)
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

// Run storybook
configure(loadStories, module);

And my Loading.storybook.js like this:

import React from 'react';
import { storiesOf } from '@storybook/react';
import Loading from '../components/Loading';
import { IntlProvider } from 'react-intl';

import '../styles/compiled-css/style.css';
import '../index.css';

const DEFAULT_LOCALE = 'en';
const DEFAULT_MESSAGES = require('../translations/locales/en')

storiesOf('Loading', module)
  .add('default', () => (
    <IntlProvider locale={DEFAULT_LOCALE} key={DEFAULT_LOCALE} messages={DEFAULT_MESSAGES}>
        <Loading />
	</IntlProvider>
  ));

Then the Loading component is also working without errors within storybook.

[sthuber90]

Still don't know why it wasn't working with the decorator, but as storybook-addon-intl was updated to support stoybook v3 I don't need the workaround with the decorator anymore.

[shilman]

@sthuber90 glad you got it fixed! 👍

[McMerph]

You do not return value from anonymous function
Try change

addDecorator(story => {
  <IntlProvider locale={DEFAULT_LOCALE} key={DEFAULT_LOCALE} messages={DEFAULT_MESSAGES}>
     { story() }
  </IntlProvider>
})

to (curly braces => round braces)

addDecorator(story => (
  <IntlProvider locale={DEFAULT_LOCALE} key={DEFAULT_LOCALE} messages={DEFAULT_MESSAGES}>
     { story() }
  </IntlProvider>
))

It works for me