React v15.4 to v16 migration problems

Question

I'm trying to migrate my whole project and I'm having this issue in the main.jsx file.

"react-router": "3.0.x"
"material-ui": "^0.19.4"
"react-redux": "4.4.8"

Objects are not valid as a React child (found: object with keys {default}). If you meant to render a collection of children, use an array instead. in Router (at main.jsx:68) in MuiThemeProvider (at main.jsx:67) in Provider (at main.jsx:66)

The code:

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme(MyRawTheme)}>
            <Router
                history={history}
                routes={routes}
                render={applyRouterMiddleware(useScroll())}
            />
        </MuiThemeProvider>
    </Provider>, document.getElementById('main-app')
);

What is goin on?

Dane · Answer 1 · 2017-10-11T09:20:36.843

1

Looks like React Router v3.0.x does not support React 16. Try upgrading to React Router v3.2.x, although I recommend React Router v4. For details see this thread.

Looks like you are exporting an Object instead of a class. Instead of const routes being a React element, make a Routes component (function or class) and put all the routes inside its render().
Eg:

const Routes = () => (
  <Route>
  .
  .
  .
  </Route>
)

and in the main file:

<MuiThemeProvider muiTheme={getMuiTheme(MyRawTheme)}>
  <Router
    history={history}
    render={applyRouterMiddleware(useScroll())}>
      {routes}
  </Router>
</MuiThemeProvider>

edited Oct 11 '17 at 09:20

answered Oct 10 '17 at 19:51

Dane

9,242
5
33
56

I updated to v.3.2.0, which is supposed to be working with React 16, and it shows the same error. – Jesús Fuentes Oct 11 '17 at 07:30
After commenting a few lines in my routes file, it seems this issue was fixed but now I have "The root route must render a single element" so I'll continue digging. – Jesús Fuentes Oct 11 '17 at 08:17
Yep but the code is old so it was being "imported" with require so I had two options: add .default at the end or just use standard ES6 import. I continue the process, it's showing now: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.". Digging hard! – Jesús Fuentes Oct 11 '17 at 08:36
https://pastebin.com/eva5E4YC Right now I'm testing with Signin. It's export code -> "export default withRouter(connect(mapStateToProps)(Signin));" – Jesús Fuentes Oct 11 '17 at 08:44
Yes, I edited my comment from above with the full export line. – Jesús Fuentes Oct 11 '17 at 08:55
After changing it to your new edit: Warning: Failed prop type: Invalid prop `routes` supplied to `Router`. Warning: [react-router] Location "/signin" did not match any routes – Jesús Fuentes Oct 11 '17 at 09:13
After your last edit: Warning: Failed prop type: Invalid prop `children` supplied to `Router`. in Router (at main.jsx:68) – Jesús Fuentes Oct 11 '17 at 09:52
I think it is related on how is Webpack importing the classes. ``` ``` That is showing the previous error of Element type (...) but got: object. – Jesús Fuentes Oct 11 '17 at 10:21
You will have to undo changes suggested by me.. `children` seems to be a required prop in v3, as opposed to v4 – Dane Oct 11 '17 at 10:26
1

and try to standardize all module imports and exports in your project. Might be some syntax mistake. See [https://stackoverflow.com/questions/33950433/warning-failed-proptype-invalid-prop-component-supplied-to-route](https://stackoverflow.com/questions/33950433/warning-failed-proptype-invalid-prop-component-supplied-to-route) – Dane Oct 11 '17 at 10:32
Thanks for your help anyway. – Jesús Fuentes Oct 11 '17 at 11:07

score 0 · Accepted Answer · answered Oct 12 '17 at 10:11

I finally managed to fix everything successfully.

The code was using requires everywhere (even in routes) so I had to change all those requires into import or require('path').default; since the new webpack creates an object which has the actual required file inside into the key 'default'.

React v15.4 to v16 migration problems

2 Answers2