具有可加载组件的服务器端渲染不起作用

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.js捆绑包，而不是所需的客户端/供应商捆绑包。我没有将所有代码都发布在这里，而是将所有代码推送到了我在github上的分支中：https://github.com/markdstevens/ssr-ts-react-webpack-boilerplate/tree/ssr-with-code-splitting

我肯定在webpack或可加载组件中缺少某些配置，但是到处都是，似乎找不到问题。任何提示将是最欢迎的。谢谢！

Answer 1

发现了问题。在我的webpack配置中，我已经在服务器配置中使用了它：

"start": "sh -ac '. ./.env; node index.js'"

我还必须将import * as LoadablePlugin from '@loadable/webpack-plugin'; ... { entry: './src/server/app.tsx', target: 'node', externals: [nodeExternals()], output: { filename: 'server.js', }, plugins: [ new LoadablePlugin() ] } 添加到我的客户端配置中，以便一切正常。