React-redux-universal-hot-example: Material-UI Integration

[moki]

Hello everyone i wonder if i might get help integrating Material-UI into this boilerplate.
adding this simple wrapper + header components:

<MuiThemeProvider muiTheme={getMuiTheme()}>
          <Helmet {...config.app.head}/>
            <AppBar
              title="Title"
              iconClassNameRight="muidocs-icon-navigation-expand-more"
            />
</MuiThemeProvider>

to App container leads to errors:

Warning: Failed propType: Invalid prop `children` supplied to `MuiThemeProvider`, expected a single ReactElement. Check the render method of `App`.
[1] [piping] can't execute file: /home/kirill/code/react-redux-universal-hot-example/bin/server.js
[1] [piping] error given was: Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
[1]     at invariant (/home/kirill/code/react-redux-universal-hot-example/node_modules/fbjs/lib/invariant.js:38:15)
[1]     at ReactCompositeComponentMixin._renderValidatedComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:713:156)
[1]     at wrapper [as _renderValidatedComponent] (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at ReactCompositeComponentMixin.performInitialMount (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:291:30)
[1]     at ReactCompositeComponentMixin.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:222:21)
[1]     at wrapper [as mountComponent] (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at Object.ReactReconciler.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactReconciler.js:39:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactMultiChild.js:203:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactDOMComponent.js:593:32)
[1]     at ReactDOMComponent.Mixin.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactDOMComponent.js:478:29)

I suspect server rendering being the issue but not compitent enough to solve it myself Please Help 🙌

[moki]

sorry for making a fuss out of nothing, all along was a small bug cased by me stripping out alot of boilerplate at once and adding my own stuff 😅
Have to say that it wasnt even Material-ui issue, its working out of the box if u follow instructions provided at http://www.material-ui.com/#/get-started/prerequisites Getting Started Sections.

[vijay122]

no parameter was passed to the getMuiTheme(), was that the issue?

[AndreLion]

@vijay122

I guess the real issue is: you can have only one child under <MuiThemeProvider />

e.g.

<MuiThemeProvider>
    <p>text</p>
    <a href="#">link</a>
</MuiThemeProvider>

should be:

<MuiThemeProvider>
    <div>
        <p>text</p>
        <a href="#">link</a>
    </div>
</MuiThemeProvider>

[xech3l0nx]

@AndreLion you freaking saved my day, bless you

[ghost]

@AndreLion Thanks man, saved my day too, cheers!

[vigneshncc]

@AndreLion Thanks man. It works.

[melMass]

You can also simply use React.fragment to avoid making extra div.

<MuiThemeProvider>
    <React.fragment>
        <p>text</p>
        <a href="#">link</a>
    </React.fragment>
</MuiThemeProvider>