CODEWITHSUNDEEP
reactjsreact-routermaterial-ui
Jesús Fuentes
Jesús Fuentes

Reputation: 919

React v15.4 to v16 migration problems

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

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?

Upvotes: 1

Views: 2651

Answers (2)

Jes&#250;s Fuentes
Jes&#250;s Fuentes

Reputation: 919

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

Upvotes: 0

Dane
Dane

Reputation: 9552

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>

Upvotes: 1

Related Questions