React SSR code splitting: Lodable.Capute is not capturing the module name

Question

I'm using react-lodable as of my code splitting module, but I have a problem in server side of the whole story and it seems that when I use this piece of code in my node server at server.js file :

let modules = []

const markup = renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <StaticRouter location={req.url} context={{}}>
      <App />
    </StaticRouter>
  </Loadable.Capture>
)

console.log(modules) // this is always an empty array

React Lodable can't capture the modules and the modules is always an empty array. I read a lot of threads on this issue and some one says that you should import your components correctly here. The doc on the other hand says that if you import react-lodable/babel preset in your .babelrc file, it would solve the issue. I added it to my babelrc file but nothing changed; it is still empty.

Here is one of my lazy loaded component:

import React from 'react'
import Loadable from 'react-loadable'


const B_async = Loadable({
  loading: () => <h1>loading B...</h1>,
  loader: () => import('./B.component')
})


export default B_async

Why can't my Lodable capture modules?

Answer 1

using Loadable.preloadAll() on server side might solve your problem.

Loadable.preloadAll().then(() => {
    server.listen(appConfig.server.port, (error) => {
      if (error) {
        console.log(`Failed to start rendering server :: ${error}`);
        throw error;
      }

      console.log(`Rendering server listening on http://${appConfig.server.host}:${appConfig.server.port}`);
    });
  });