Рендеринг на стороне сервера с загружаемыми компонентами не работает

Question

Некоторое время я безуспешно пытался заставить мою конфигурацию работать для приложения, которое имеет следующие характеристики:

1. Машинопись
2. Реагировать
3. Рендеринг на стороне сервера с использованием загружаемых компонентов
4. Webpack

По какой-то причине этот фрагмент, который должен найти все фрагменты, которые использовались во время рендеринга на стороне сервера, не работает:

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
});

Это возвращает server.jsbundle вместо необходимых пакетов клиента / поставщика. Вместо того, чтобы размещать здесь весь код, я отправил весь код в свою ветку на github: https://github.com/markdstevens/ssr-ts-react-webpack-boilerplate/tree/ssr-with-code-splitting

Мне, должно быть, не хватает какой-то конфигурации в webpack или в загружаемых компонентах, но я искал везде и не могу найти проблему. Любые советы приветствуются. Спасибо!

Answer 1

Нашел проблему. В моей конфигурации webpack у меня было это в конфигурации моего сервера:

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

Мне пришлось добавить LoadablePlugin в конфигурацию моего клиента, чтобы все работало.