Error on re-render

The first time it loads its fine, however when I make a change and it tries to re-render shows this error message:

Cannot read property 'prepareStyles' of undefined
TypeError: Cannot read property 'prepareStyles' of undefined
    at RaisedButton.render (webpack:///~/material-ui/RaisedButton/RaisedButton.js:273:48)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack:///~/react/lib/ReactCompositeComponent.js:808:34)
    at ReactCompositeComponentWrapper._renderValidatedComponent (webpack:///~/react/lib/ReactCompositeComponent.js:835:34)
    at ReactCompositeComponentWrapper.performInitialMount (webpack:///~/react/lib/ReactCompositeComponent.js:372:30)
    at ReactCompositeComponentWrapper.mountComponent (webpack:///~/react/lib/ReactCompositeComponent.js:260:21)
    at Object.mountComponent (webpack:///~/react/lib/ReactReconciler.js:47:35)
    at ReactDOMComponent.mountChildren (webpack:///~/react/lib/ReactMultiChild.js:240:44)
    at ReactDOMComponent._createInitialChildren (webpack:///~/react/lib/ReactDOMComponent.js:698:32)
    at ReactDOMComponent.mountComponent (webpack:///~/react/lib/ReactDOMComponent.js:523:12)
    at Object.mountComponent (webpack:///~/react/lib/ReactReconciler.js:47:35)

Here is the code of the component:

import React from 'react';
import DropZone from 'react-dropzone';
import {RaisedButton, FontIcon} from 'material-ui';

class FileUploader extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {imageFiles} = this.props;
        return (
            <div>
                <DropZone className="drop-zone">
                    <RaisedButton label="Upload Pictures" icon={<FontIcon className="fa fa-upload"/>}/>
                    <p>
                        <small> here the product pictures in
                            <code>jpeg</code>
                             or
                            <code>png</code>
                            format, with size less or equal to 2MB</small>
                    </p>
                </DropZone>
                <div className="image-preview">
                    {imageFiles && imageFiles[0]
                        ? imageFiles.map((image) => {
                            return (
                                <div className="image-wrapper"><img src={image.preview
                                    ? image.preview
                                    : image.link()}/></div>
                            );
                        })
                        : <div>
                            <i className="fa fa-camera"></i>{' Preview Images'}</div>}
                </div>
            </div>
        );
    }
}

export default FileUploader;

I am also using a decorator to provide the props to the Material-UI components.

[CGamesPlay]

I have this same problem. When MuiThemeProvider is used from a decorator, hot reloading fails. Here is a repository which demonstrates: https://github.com/CGamesPlay/storybook-484

[nathanredblur]

I notice that when ‘storybook-addon-apollo-client’ is active, my component do two renders, and if I activate ‘storybook-react-i18next’ my component do 4 unnecessary renders.

That is a problem, because I’m using MockedProvider and when a component do more renders than I’m expecting, my query is executed more than once, so I need to duplicate fake query mocks for each render.

on refresh the whole page, I don’t have this issue. but when I do a change in the code, 4 to 6 unnecessary renders appears.

component

import WORLD_QUERY from './worldQuery.graphql';

const Hello = () => {
  const world = useQuery(WORLD_QUERY)
  return <div>{world}</div>
}

story

import WORLD_QUERY from './worldQuery.graphql';
const apolloMock = {
    request: { query: WORLD_QUERY },
    result: {
      data: "world",
    }
}

const Template = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.parameters = {
  apolloClient: {
    mocks: [
       // one request for each render generated 
       // on use 'storybook-addon-apollo-client' and 'storybook-react-i18next' addons
       apolloMock,
       apolloMock,
       apolloMock,
       apolloMock,
    ],
  },
};