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?

Renfro

May be a issue with react router, try: <Route path="/about/" exact component={props => <About {...props} /> } /> – Detour

That fixes the warning, but unfortunately doing this still generates an error loading the About component when going to the route (in this case /about): loadable.es.js:246 Uncaught Error: Loading chunk About failed. – Renfro

Could you solve this? I'm getting the same error – Patrilocal

Unfortunately I did not, may be I'll provide a link to a repository in order to reproduce the problem so it's easier to know what's wrong. – Renfro

I think it should be okay in client-side render.The errors maybe happen as you don't config correctly for the ssr. – Kinard

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.

Cursed

That fixes the warning but the route (in this example /about), still does not work when using this syntax. – Renfro

@Renfro have you tried to return the default import? import(“./About”).then(c => c.default) – Soldiery

Same error is returned: Loading chunk About failed. – Renfro

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!

Disability

Answer 3

why don't you use react.lazy? It is the official component.

const About = React.lazy(() => import('./About')
<Route exact path="/about" component={props => <About {...props} />} />

Ilium

React lazy does not support server side rendering at the moment: React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering. reactjs.org/docs/code-splitting.html – Renfro