Loadable-components: React-Routr-Dom: Failed prop type

Created on 9 Dec 2018 · 4Comments · Source: gregberge/loadable-components

Just a quick question.

 "dependencies": {
    "@loadable/component": "^5.2.1",
    "p-min-delay": "^2.0.0",
    "react": "^16.7.0-alpha.0",
    "react-dom": "^16.7.0-alpha.0",
    "react-router-dom": "^4.3.1"
  },

I'm getting a warning Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

What I do is the following

import React from 'react'
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from 'react-router-dom'
import {
  render
} from 'react-dom'
import loadable from '@loadable/component'

const myComponent = loadable(() => import('./myComponent'))

const app = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path={'/'} component={myComponent}/>
      </Switch>
    </BrowserRouter>
  )
}

// the component
import React from 'react'

const myComponent = () => {
  return (
    <div>Hello world!</div>
  )
}

export default myComponent

Am I doing something wrong here or is that an issue with React/React-Router itself? I mean it is working as intended, but I would like to fix the warning.

question ❓

Source

ghost

Most helpful comment

Hello @jerptrs, the only thing not good in your example is your component without an upper cased first letter. But the warning is a problem in react-router: React.forwardRef() returns an object (that is technically a component), react-router assumes that a component is a function (or a class), and since React v16.3+ (React.forwardRef), it can also be an object. Since @loadable/component uses React.forwardRef internally, you have the warning. I checked and it is solved in master branch of react-router, we just need to wait for a new version to be released!