How to use react-loadable - 10 common examples

import Loadable from "react-loadable"

const port = process.env.APP_PORT || 2018
app.set("port", port)

// production configuration
if (process.env.NODE_ENV == "production") {
  // gzip compression
  const compression = require("compression")
  app.use(compression())
}

// start the server
const server = http.createServer(app)
// ref Loadable: https://github.com/jamiebuilds/react-loadable#preloading-all-your-loadable-components-on-the-server
Loadable.preloadAll().then(() => {
  server.listen(port)
  server.on("error", onError)
  server.on("listening", onListening)
})

function onError(error) {
  if (error.syscall !== "listen") {
    throw error
  }
  const bind = typeof port === "string" ? "Pipe " + port : "Port " + port

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case "EACCES":
      console.log("--- \n" + bind + " requires elevated privileges \n---")
      process.exit(1)

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { hydrate } from 'react-dom';
import Loadable from 'react-loadable';
import { HelmetProvider } from 'react-helmet-async';

import DataLoader from '../common/lib/DataLoader';

import configureStore from '../common/redux/store';

// Initialize store
const store = configureStore(window.__INITIAL_STATE__);
const mountApp = document.getElementById('app');

Loadable.preloadReady().then(() => {
  hydrate(
    
      
        
          
        
      
    ,
    mountApp,
  );
});

// For hot reloading of react components
if (module.hot) {
  console.log('🔁  HMR Reloading - client');
  module.hot.accept();

import express from 'express'
import path from 'path'
import Loadable from 'react-loadable'
import stateRoutes from './server/stateRoutes'

const app = express()

// Serving static files
app.use(express.static('public'))
app.use('/assets', express.static(path.resolve(__dirname, 'assets')))

const PORT = process.env.PORT || 3000
Loadable.preloadAll().then(() => app.listen(PORT, '0.0.0.0', () => {
  console.log(`The app is running in PORT ${PORT}`)
}))

stateRoutes(app)

const getAsyncBundle = (modules) => {

    let loadableJson = getBundleAssets();


    let bundles = [];

    try {
        bundles = getBundles(loadableJson, modules)
    } catch (e) {
        // todo: logger
    }

    return bundles
        .filter((bundle) => {
            return /\.js$/.test(bundle.file)
        })
        .map((item) => item ? `${preLoc}${item.file}` : '')
};

}

    const loadableBundleStatsPath = path.join(settings.build, 'react-loadable.json')
    const craBundleStatsPath = path.join(settings.build, 'asset-manifest.json')
    
    let loadableBundleStats = false
    let craBundleStats = false
    try { loadableBundleStats = await readSourceFile(loadableBundleStatsPath, true) } catch (err) {}
    try { craBundleStats = await readSourceFile(craBundleStatsPath, true) } catch (err) {}

    let allBundles = false

    // generate assets map with the ReactLoadable bundles stats
    if (loadableBundleStats !== false) {
        try {
            allBundles = getBundles(loadableBundleStats, modules)
        } catch (err) {
            console.log(`[ssr] "react-loadable.json" bundles stats failed - ${err.message}`)
        }
    }

    // use basic CRA's "asset-manifest.json"
    if (allBundles === false && craBundleStats !== false) {
        try {
            allBundles = Object.keys(craBundleStats)
                .filter((bundleName) => modules
                    .map(moduleName => moduleName.replace('./', ''))
                    .some((moduleName) => (
                        bundleName.indexOf(`${moduleName}.js`) !== -1 ||
                        bundleName.indexOf(`${moduleName}.css`) !== -1
                    )))
                .map((bundleName) => ({

const lines = props.value.split("\n").length;
    const height = CODEMIRROR_BUFFER + (lines * CODEMIRROR_LINE_HEIGHT);

    return (
      <div height="" style="{{">
        {contents}
      </div>
    );
  };

  ApproximateHeightLoader.propTypes = {
    value: PropTypes.string
  };

  // This loads Codemirror and all of its addons.
  const LoadableCodeMirror = Loadable.Map({
    loader: {
      CodeMirror: () =&gt; (
        import('./codemirror').then((module) =&gt; (
          // HACK: Add a "zero" delay after the module has
          // loaded, to allow their styles to take effect
          new Promise((resolve) =&gt; {
            setTimeout(() =&gt; resolve(module.default), 0);
          })
        ))
      )
    },

    loading() {
      return (
        
      );

module.exports = function override(config, env) {
  if (process.env.REACT_APP_MAINTENANCE_MODE === 'enabled') {
    console.error('\n\n⚠️ ----MAINTENANCE MODE ENABLED----⚠️\n\n');
  }
  if (process.env.NODE_ENV === 'development') {
    config.output.path = path.join(__dirname, './build');
    config = rewireReactHotLoader(config, env);
    config.plugins.push(
      WriteFilePlugin({
        log: true,
        useHashIndex: false,
      })
    );
  }
  config.plugins.push(
    new ReactLoadablePlugin({
      filename: './build/react-loadable.json',
    })
  );
  config = injectBabelPlugin('react-loadable/babel', config);
  config = transpileShared(config);
  // Filter the default serviceworker plugin, add offline plugin instead
  config.plugins = config.plugins.filter(
    plugin => !isServiceWorkerPlugin(plugin)
  );
  // Get all public files so they're cached by the SW
  let externals = [];
  walkFolder('./public/', file => {
    if (file.indexOf('index.html') > -1) return;
    externals.push(file.replace(/public/, ''));
  });
  config.plugins.push(

import Loadable from 'react-loadable'
import LoadingSpinner from 'components/LoadingSpinner'

export default {
  component: Loadable({
    loader: () =>
      import(/* webpackChunkName: 'NotFound' */ './components/NotFoundPage'),
    loading: LoadingSpinner
  })
}

const NomadJobRaw = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "nomad-job-raw" */ "./components/JobRaw/JobRaw")
})
const NomadJobs = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "nomad-jobs" */ "./containers/jobs")
})
const NomadJobTaskGroups = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "nomad-job-taskgroups" */ "./components/JobTaskGroups/JobTaskGroups")
})
const ConsulSelectRegion = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "consul-select-region" */ "./containers/select_consul_region")
})
const NomadSelectRegion = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "nomad-select-region" */ "./containers/select_nomad_region")
})
const NomadServer = Loadable({
  delay: 200,
  loading: MyLoadingComponent,
  loader: () => import(/* webpackChunkName: "nomad-server" */ "./containers/server")
})
const NomadServerInfo = Loadable({
  delay: 200,

loading: LoadingIndicator
});

const CreateWorker = Loadable({
    loader: () =>
        import(/* webpackChunkName: "create-worker" */ "./components/Account/CreateWorker"),
    loading: LoadingIndicator
});

const Barter = Loadable({
    loader: () =>
        import(/* webpackChunkName: "settings" */ "./components/Showcases/Barter"),
    loading: LoadingIndicator
});

const Borrow = Loadable({
    loader: () =>
        import(/* webpackChunkName: "settings" */ "./components/Showcases/Borrow"),
    loading: LoadingIndicator
});

const Htlc = Loadable({
    loader: () =>
        import(/* webpackChunkName: "settings" */ "./components/Showcases/Htlc"),
    loading: LoadingIndicator
});

const DirectDebit = Loadable({
    loader: () =>
        import(/* webpackChunkName: "settings" */ "./components/Showcases/DirectDebit"),
    loading: LoadingIndicator
});