reactjsexpressmaterial-ui

Material UI 0.2x compatibility with React 16


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


Solution

  • 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.