时间戳

首页 > 解决方案 > 带有可加载组件的服务器端渲染不起作用

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

问题描述

我已经尝试了一段时间，但无济于事，让我的配置适用于具有以下特征的应用程序：

  1. 打字稿
  2. 反应
  3. 使用可加载组件的服务器端渲染
  4. 网页包

出于某种原因，这个片段，它应该找到在服务器端渲染期间使用的所有块，它不起作用：

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 或可加载组件中缺少一些配置，但我到处寻找，似乎找不到问题。任何提示都将受到欢迎。谢谢！

标签： reactjstypescriptloadable-component

解决方案

发现问题。在我的 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为了让一切正常工作，我还必须将其添加到我的客户端配置中。

推荐阅读