React Router with Loadable Components error

Question

I've created a repository with a basic example that triggers this error in case it helps:

loadable-components-ssr

I'm trying to use Loadable Components in a SSR set up with react-router-dom 4.3.1, loadable-component 5.6.0 and react-dom 16.8.1

Here is a component example to which I'm trying to apply loadable-component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

This is imported in the App component like this:

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

And passed as a prop to Route in the same App component:

<Route path="/about/" component={About} />

But I keep getting the following warning in the Developer Tools console:

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

If I use an alternative syntax as suggested in the first answer:

<Route path="/about/" component={props => <About {...props} />} />

The warning disappears, but the route to /about still gives an error when the link is clicked:

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js)
    at HTMLScriptElement.onScriptComplete (VM1805 app.bundle.js:114)

I followed the documentation about setting up loadable-components in SSR, so I've set up the client, the server and also the babel plugin as indicated.

Any idea what's wrong here?

Answer 1

This is a known issue of react router.

I think that you could code the route like this:

<Route path="/about/" component={props => <About {...props} />} />

Be careful with this implementation, because you could have some buggy behaviours with the re-renders.

Answer 2

this is your "About" component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

you are not returning jsx. thats why you are getting error.
this is how you should have returned jsx.

 const About = () => (<h2>About</h2>);

cheers!