Server side rendering with loadable components not working

Question

I have been trying for a while now, to no avail, to get my configuration working for an app that has the following characterstics:

1. Typescript
2. React
3. Server side rendering using loadable-components
4. Webpack

For some reason, this snippet, which is supposed to find all the chunks that were used during the server side rendering, is not working:

server.get("*", (req, res, next) => {
    const extractor = new ChunkExtractor({ statsFile });
    ...
    const tsx = extractor.collectChunks(
        <ChunkExtractorManager extractor={extractor}>
            <StaticRouter location={req.url}>
                <App data={data}/>
            </StaticRouter>
        </ChunkExtractorManager>
    );
    console.log(extractor.getScriptTags()); // prints server.js bundle but this isn't correct
});

It's returning the server.js bundle instead of the needed client/vendor bundles. Rather than post all the code here, I've pushed all the code to my branch on github: https://github.com/markdstevens/ssr-ts-react-webpack-boilerplate/tree/ssr-with-code-splitting

I must be missing some configuration in webpack or in loadable-components, but I've looked everywhere and can't seem to find the issue. Any tips would be most welcome. Thanks!

Answer 1

Found the issue. In my webpack configuration, I had this in my server config:

import * as LoadablePlugin from '@loadable/webpack-plugin';
...
{
  entry: './src/server/app.tsx',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    filename: 'server.js',
  },
  plugins: [
    new LoadablePlugin()
  ]
}

I had to add the LoadablePlugin to my client configuration as well in order for everything to work.