React.lazy makes Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.

[gloriaJun]

Version

"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1"

Test Scenario

• When apply code splitting for using React.lazy()

import React from 'react';
import { Switch, BrowserRouter as Router, Route } from "react-router-dom";

import Layout from './Layout';
import Home from './Home';

const DynamicPage = React.lazy(() => import('./DynamicPage'));
const NoMatch = React.lazy(() => import('./NoMatch'));

const App = () => {
  return (
    <Router>
      <Layout>
        <React.Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/dynamic" component={DynamicPage} />
            <Route component={NoMatch} />
          </Switch>
        </React.Suspense>
      </Layout>
    </Router>
  )
};

export default App;

Error Log

checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (created by CodeSplit)
    in CodeSplit (created by Route)
    in Route (created by withRouter(CodeSplit))
    in withRouter(CodeSplit) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in App (created by Route)
    in Route (created by withRouter(App))
    in withRouter(App)
    in Router (created by BrowserRouter)
    in BrowserRouter

Solution

Fixed in react-router-dom version 4.4+

References

• https://stackoverflow.com/questions/53007905/react-router-with-react-16-6-suspense-invalid-prop-component-of-type-object
• React.lazy makes Route's proptypes fail remix-run/react-router#6420

[nikhilgoswami]

This warning still exists in react-router-dom@5.1.2 & react@16.10.2