Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

Question

I have just updated my React app to 16.6.0 and react-scripts to 2.0.3 to start using lazy and I got this error when following an example on official docs:

Failed prop type: Invalid prop component of type object supplied to Route, expected function

Disregarding of it everything seems to be working, except this error in the console.

Here is some of my code:

// imports here
... 
const Decks = lazy(() => import('./pages/Decks'));
...
class App extends Component {
      ...

    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <MenuAppBar />

                    <div style={{paddingTop: '4rem'}}>
                        <Suspense fallback={<LazyLoading />}>
                            <Switch>
                                <Route exact path="/" component={Home} />
                                <Route path="/decks" component={Decks} />
                                ...
                            </Switch>
                        </Suspense>
                    </div>

                    <Footer />
                </div>
            </ConnectedRouter>
        );
    }

... }

What could I be doing wrong here?

Shubham Khatri Shubham Khatri · Accepted Answer · 2018-11-14T12:50:57

When using a lazy loaded component, you would need to supply it to the Route component like

// imports here
... 
const Decks = React.lazy(() => import('./pages/Decks'));
...
class App extends Component {
      ...

    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <MenuAppBar />

                    <div style={{paddingTop: '4rem'}}>
                        <Suspense fallback={<LazyLoading />}>
                            <Switch>
                                <Route exact path="/" component={Home} />
                                <Route path="/decks" render={(props) => <Decks {...props} />} />
                                ...
                            </Switch>
                        </Suspense>
                    </div>

                    <Footer />
                </div>
            </ConnectedRouter>
        );
    }
... 
}

Probably its an incorrect PropType check in react-router and may have been fixed in the latest versions to make it compatible with react v16.6

Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

2 Answers