React Router with Loadable Components error

React Router with Loadable Components error

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

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


I'm trying to use Loadable Components in a SSR set up with react-router-dom 4.3.1loadable-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?

reactjs webpack

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

URLs and Webpack in Reactjs

URLs and Webpack in Reactjs - I am still a newbie in ReactJS. I've been following series of tutorials and articles on the framework and decided to start putting what I've learnt so far into practice.

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Quick and simple, fast guide on integrating ReactJS with Webpack, Babel and Material Design. This is a short tutorial which will get your ReactJS app running with Webpack and Babel.

Setting up Reactjs using Webpack 4 and Babel 7

In this tutorial we will be setting up our very own reactjs from scratch using webpack and babel, so grab your pen and paper lets spin the learning wheel.

How to set up the ReactJS environment with ES6, Webpack and Babel for Beginners

React is a Javascript library, by Facebook, that is used for building user interfaces. It is a bomb library that offers so many advantages but one of the biggest setbacks is the steep learning curve. When I started out, one of the things that bugged me a whole lot was that most of the tutorials skipped over the React environment set-up.In this post, we'll take a look at several different ways to set up a ReactJS environment, and get you set up using Facebook's JavaScript Library.

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web