Material UI 0.2x compatibility with React 16

Question

After trying to upgrade from React 15.4 to React 16.4.1 (also upgraded react-dom to 16.4.1) I'm getting this error message from the router:

TypeError: _nextProps.children is not a function
    at ReactDOMServerRenderer.render (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2491:55)
    at ReactDOMServerRenderer.read (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
    at renderToString (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
    at render (/var/www/web/server/routes/others.jsx:141:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)

The code:

const render = () => {
  const body = renderToString(
    <MuiThemeProvider muiTheme={muiTheme}>
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <IntlProvider>
            <RouterContext {...renderProps} />
          </IntlProvider>
        </Provider>
      </ThemeProvider>
    </MuiThemeProvider>
);

render is defined here but returned afterwards in the same routing file:

Promise.all(prefetchData(renderProps, store))
  .then(render)
  .catch(prefetchError => next(prefetchError));

I followed the recommended instructions in order to upgrade from React 15.x to React 16.x

Since I've found related issues regarding material-ui compatibility with React 16:

https://github.com/mui-org/material-ui/issues/8434

https://github.com/mui-org/material-ui/issues/7795

I was wondering if this error message could be caused by an incompatibility between material-ui 0.2x and React 16.x, or in other words, I would like to know if it's necessary to upgrade to material-ui 1.x in order to be able to use React 16.x

We are using material-ui 0.18.1 with React 16.3 and all is working well. I don't think this error is because of incompatibility between material-ui 2.x and React 16.x. — yeshashah, Jul 05 '18 at 07:02
Although that's on client side and you are using on the server-side using `renderToString`. So that might be the case. — yeshashah, Jul 05 '18 at 07:03
https://github.com/kireerik/razzle-material-ui-styled-example#getting-started I found this repo which renders material-ui 0.x on server side with React 16. So it’s definitely not a compatibility issue. — yeshashah, Jul 05 '18 at 08:12
So it’s not necessary to upgrade material-ui to version 1.x to use React 16.x. — yeshashah, Jul 05 '18 at 08:18
Thanks for the info, I think your third comment can be the accepted answer if you type it as such :) May be it's an incompatibility regarding only `MuiThemeProvider` from material ui 0.2x, but that would be out of scope of this question I think. Thanks! — rfc1484, Jul 05 '18 at 14:46

yeshashah · Accepted Answer · 2018-07-05T17:23:35.880

3

We are using material-ui 0.18.1 with React 16.3 for client-side rendering and all is working well. I don't think this error is because of incompatibility between material-ui 0.2x and React 16.x.

For server side rendering, I found this repo which renders material-ui 0.x on server side with React 16.x. So it’s definitely not a compatibility issue.

edited Jul 05 '18 at 17:23

answered Jul 05 '18 at 17:10

yeshashah

1,536
11
19

score 1 · Answer 2 · answered Dec 31 '18 at 10:25

I was recently tasked with supporting both MUI 0.x and MUI 1.x and although it was challenging, I found a way to make it work.

With MUI 0.x, I found the versions that worked well together were:

[email protected]
[email protected] - upgrading to [email protected] will break it, something to do with how events are handled in that minor update.

There was some other configuration required to get MUI 1.x working in conjunction with MUI 0.x but hopefully this part is enough to answer your question.

Material UI 0.2x compatibility with React 16

2 Answers2