[With React-router] Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.

[Albert-Gao]

Thanks for the quick work!
Super excited to try it out!
A quick issue, don't know if I miss something.

  "dependencies": {
    "mobx": "4",
    "mobx-react-lite": "^0.2.0",
    "react": "^16.7.0-alpha1",
    "react-dom": "^16.7.0-alpha1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1"
  },

How to reproduce:

1. create-react-app try
2. edit the App.js to the following:

import React from "react";
import { observer } from "mobx-react-lite";
import { BrowserRouter, Route } from "react-router-dom";

const Test = observer(() => <div>Quick Test</div>);

function App() {
  return (
    <BrowserRouter>
      <Route path="*" component={Test} />
    </BrowserRouter>
  );
}

export default App;

3. yarn start, rendering works fine!

4. check the console:

index.js:1452 Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.
in Route (at App.js:10)
in App (at src/index.js:7)

[danielkcz]

Thanks for the report. The observer is using new React.memo underneath which strangely enough returns an object instead of a function. I am not sure if that's by design or some sort of a bug. My best guess is that react-router needs to accommodate prop types checks accordingly.

[danielkcz]

I've prepared code sandbox for a comparison. There is an copy of our observer without React.memo and that works just fine.

https://codesandbox.io/s/x7ox551ypo

I will try to open issue with React first and see that happens.

[Albert-Gao]

Thanks for the quick reply.

But consider it renders without problem, could it be a react-router issue? Or, I mean, not issue, just how it does its type checking as you mentioned.

[danielkcz]

The warning is originating from react-is package which is an official package from React to check for a component type. They need to update it and then react-router need to update as well. Could you please open issue in react-router just to keep track of it?

[Albert-Gao]

Done. And I changed the observer to memo in that post.

But shouldn't post an issue at react-is instead? But seems it links to react repo.

[danielkcz]

Thanks. Yea, react-is is maintained by React team. I already made them aware of it.

[Albert-Gao]

It's been fixed in react-router 4.4 according to this issue: remix-run/react-router#6471. Will wait for the release, or I will try the beta tonight.

[danielkcz]

Closing this since it isn't an issue of this package.