Chunked loading of assets for CRA SSR

I am trying to chunk my assets and lazy load them using react-loadable.

I used the following renderToString:

renderToString(
  <Loadable.Capture report={m => modules.push(m)}>
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <Frontload isServer={true}>
          <App />
        </Frontload>
      </StaticRouter>
    </Provider>
  </Loadable.Capture>
)

then I try to extract the chunks as below:

const extractAssets = (assets, chunks) =>
  Object.keys(assets)
    .filter(
      asset => chunks.indexOf(asset.replace('.js', '')) > -1
    )
  .map(k => assets[k]);
// Let's format those assets into pretty <script> tags
const extraChunks = extractAssets(manifest, modules).map(
  c =>
    `<script type="text/javascript" src="/${c.replace(
      /^\//,''
    )}"></script>`
  );

It is based on the code from https://github.com/mnsht/cra-ssr

The extract assets is not working for me though. Object.keys() for the asset manifest returns files and entrypoints.

Below is the actual assets manifest:

{
  files: {
    'main.css': '/static/css/main.f975a44f.chunk.css',
    'main.js': '/static/js/main.a2b23f82.chunk.js',
    'runtime-main.js': '/static/js/runtime-main.904d5b6d.js',
    'static/js/2.729d59f7.chunk.js': '/static/js/2.729d59f7.chunk.js',
    'static/js/3.12786515.chunk.js': '/static/js/3.12786515.chunk.js',
    'static/css/4.54cc97ef.chunk.css': '/static/css/4.54cc97ef.chunk.css',
    'static/js/4.3864c0a5.chunk.js': '/static/js/4.3864c0a5.chunk.js',
    'static/css/5.414892ae.chunk.css': '/static/css/5.414892ae.chunk.css',
    'static/js/5.19ce5aa6.chunk.js': '/static/js/5.19ce5aa6.chunk.js',
    'static/css/6.0b084d33.chunk.css': '/static/css/6.0b084d33.chunk.css',
    'static/js/6.a557fa17.chunk.js': '/static/js/6.a557fa17.chunk.js',
    'static/css/7.419cd89c.chunk.css': '/static/css/7.419cd89c.chunk.css',
    'static/js/7.42da3d59.chunk.js': '/static/js/7.42da3d59.chunk.js',
    'static/js/8.0fe13e82.chunk.js': '/static/js/8.0fe13e82.chunk.js',
    'index.html': '/index.html',
    'precache-manifest.abc91afd89c3af36afab7f06346ceb0d.js': '/precache-manifest.abc91afd89c3af36afab7f06346ceb0d.js',
    'service-worker.js': '/service-worker.js',
    'static/js/2.729d59f7.chunk.js.LICENSE.txt': '/static/js/2.729d59f7.chunk.js.LICENSE.txt',
    'static/js/3.12786515.chunk.js.LICENSE.txt': '/static/js/3.12786515.chunk.js.LICENSE.txt',
    'static/media/index.module.scss': '/static/media/sm_logo_62.ccbdb246.svg',
    'static/media/default.png': '/static/media/default.0866d697.png'
  },
  entrypoints: [
    'static/js/runtime-main.904d5b6d.js',
    'static/js/3.12786515.chunk.js',
    'static/css/main.f975a44f.chunk.css',
    'static/js/main.a2b23f82.chunk.js'
  ]
}

My chunks are paths to the modules that I am trying to load. For example, in my app, there is:

const LoadableCategories = Loadable({
  loader: () => import('../categories'),
  loading: <Loading />
});

and

<Route path='/categories' component={LoadableCategories} />

My modules would have ../categories inside. For some reason, I actually have module path twice as [ '../categories', '../categories' ].

Still, with extractAssets being written as it is now, extraChunks is always []. Hence, I am missing chunks and the async loading does not work.

Please advise.

My loadable component was incorrectly defined. The working version is below.

const LoadableCategory = Loadable({
  loader: () => import('../category'),
  loading() {
    return <div>Loading...</div>;
  }
});