How to use the react-loadable.preloadAll function in react-loadable

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 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 DOT_ENV_CONFIG = dotenv.config();
if (DOT_ENV_CONFIG.error) {
  throw DOT_ENV_CONFIG.error;
}

// now `process.env.*` variables are set run the rest of the app
const http = require('http');
const nodeLogger = require('#lib/logger.node');
const app = require('./server').default;

const logger = nodeLogger(__filename);
const server = http.createServer(app);
const port = process.env.PORT || 7080;
let currentApp = app;

Loadable.preloadAll().then(() => {
  server.listen(port, error => {
    if (error) {
      logger.error(error);
    }
  });
});

if (module.hot) {
  logger.info('✅  Server-side Hot Module Replacement enabled');

  module.hot.accept('./server', () => {
    logger.info('🔁  Hot Module Replacement reloading `./server`...');
    server.removeListener('request', currentApp);
    const newApp = require('./server').default; // eslint-disable-line global-require
    server.on('request', newApp);
    currentApp = newApp;

import mainController from "./controllers/main";
import routesApi from "./routes/api";

const app = express();

app.engine("html", es6Renderer);
app.set("views", "views");
app.set("view engine", "html");

app.use("/static", express.static("static"));
app.use("/static/js", express.static("client"));
app.use("/api", routesApi);
app.use(mainController);

Loadable.preloadAll()
    .then(() => {
        app.listen(3000, () => {
            console.log("Running on http://localhost:3000/");
        });
    })
    .catch(err => {
        console.log(err);
    });

<div id="app">${html}</div>
        
        ${scripts.map(script =&gt; {
          return ``
        }).join('\n')}
        
      
    
  `);
});

app.use('/dist', express.static(path.join(__dirname, 'dist')));

Loadable.preloadAll().then(() =&gt; {
  app.listen(3000, () =&gt; {
    console.log('Running on http://localhost:3000/');
  });
}).catch(err =&gt; {
  console.log(err);
});

.join('');

      const responseHTML = templateHTML
        .replace('{{TITLE}}', title)
        .replace('{{SEO_CRITICAL_METADATA}}', metadata)
        .replace('{{CRITICAL_CSS}}', minifyCssString(styleTags))
        .replace('{{APP}}', html)
        .replace('{{LOADABLE_CHUNKS}}', bundleScripts)
        .replace('{{REDUX_DATA}}', serialize(reduxState));

      response.status(status).send(responseHTML);
    });
  });
});

Loadable.preloadAll().then(() => {
  spdy.createServer(certificates, app).listen(3000, err => {
    if (err) {
      throw new Error(err);
    }

    console.info(`HTTPS Server is listening @ port 3000`);
  });
});

import app from './server'
import http from 'http'
import Loadable from 'react-loadable'

const server = http.createServer(app)

let currentApp = app

Loadable.preloadAll().then(() => {
  server.listen(process.env.PORT || 3000)
})

if (module.hot) {
  console.log('✅  Server-side HMR Enabled!')

  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...')
    server.removeListener('request', currentApp)
    const newApp = require('./server').default
    server.on('request', newApp)
    currentApp = newApp
  })
}

const app = express();
const path = require('path');
const port = 1337;

app.get('/clear-redux-store/:type/:slug', clearReduxStore.bySlug(store));

app.get('/clear-redux-store', clearReduxStore.all(store));

app.use('^/$', serverRenderer(store));

app.use(express.static(path.join(__dirname, 'build')));

app.use('*', serverRenderer(store));

Loadable.preloadAll().then(() => {
	app.listen(port, (error) => {
		console.log("listening on " + port + "...");
	});
});

<title>React Loadable SSR Add-on Example</title>
        ${styles.map(style =&gt; {
          return ``;
        }).join('\n')}
      
      
        <div id="app">${html}</div>
        ${scripts.map(script =&gt; {
          return ``
        }).join('\n')}
      
    
  `);
});

Loadable.preloadAll().then(() =&gt; {
  server.listen(3003, () =&gt; {
    console.log('Running on http://localhost:3003/');
  });
}).catch(err =&gt; {
  console.log(err);
});

app.use(morgan('dev'));

    if (process.env.NODE_ENV === 'development') {
        const webpackDevServerProxy = require('http-proxy-middleware')({ 
            target: 'http://localhost:3001', 
            changeOrigin: true,
            ws: true 
        });
    
        app.use(['**/*.*', '/static', '/sockjs-node'], webpackDevServerProxy);
    } else {
        app.use(compression());
        app.use(express.static(staticStorage));
    }

    preloadAll().then(() => server = app.listen(port));
};