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