React-Loadable only creates first component chunk

Question

I seriously don't understand why i'm facing such issue with React-Loadable while code splitting in create-react-app build. I'm trying to split code via routes and followed the basic rules mentioned in the docs and other places but only the first component chunk is being generated instead all components chunk should get generated. Please suggest your solutions or points at this.

const MainRoute = () => (
<div> 
<Switch>
     <Route exact path="/" component={LoadableClientLogin} />
     <Route exact path="/apply" component = {LoadableApply}/> 
     <Route exact path="/new_application" component = 
{LoadableAddNewApplication}/> 
     <Route path="*" component={LoadableClientLogin} /> 
</Switch>  
</div>)

Below is the react-loadable component

import React, { Component } from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  loader: () => import(/* webpackChunkName: "clientLogin" */'./index'),
  loading: <div>Loading...</div>,
})

export default class LoadableClientLogin extends Component {
  render() {
    return <LoadableComponent />;
  }
}

Index is the parent component consisting of many child components. Such as header,footer,overview and more... — tanuj upreti, Feb 28 '18 at 12:50
give [this](https://www.npmjs.com/package/react-asynchronous-component) module a try. it does the same thing. if this also causes the same issue then you webpack config needs to be checked. — hannad rehman, Oct 11 '18 at 07:03

score 1 · Answer 1 · answered Oct 13 '18 at 00:03

In react-loadable's documentation, at the very end of the SSR section, there is a paragraph that says:

Preloading ready loadable components on the client We can use the Loadable.preloadReady() method on the client to preload the loadable components that were included on the page.

Like Loadable.preloadAll(), it returns a promise, which on resolution means that we can hydrate our app.

Which means that in order to generate both:

1) first layer component (LoadableClientLogin)

2) second layer component (clientLogin)

you need to:

1) wrap the second layer component in Loadable, as you already did

2) wrap ReactDOM.hydrate or ReactDOM.render inside Loadable.preloadAll(). See the following code block for example (code from react-loadable documentation)

// src/entry.js
import React from 'react';
import ReactDOM from 'react-dom';
import Loadable from 'react-loadable';
import App from './components/App';

Loadable.preloadReady().then(() => {
  ReactDOM.hydrate(<App/>, document.getElementById('app'));
});

React-Loadable only creates first component chunk

1 Answers1