Question

我使用react-loadable动态加载JS模块。我还使用服务器端渲染，该渲染已设置并适用于react-loadable。但是，在客户端似乎有问题，因为在我加载页面时，控制台中会出现警告：

Warning: Text content did not match. Server: "Choose a name and enter passwordNamePasswordLogin" Client: "Loading..."

我在客户端使用preloadReady，这样可以避免出现此错误。

我的index.jsx如下：

import { preloadReady } from 'react-loadable';

window.addEventListener('load', async () => {    
  await preloadReady();

  hydrate(
    <App />,
    document.getElementById('root')
  );
});

打包版本：

节点：v8.12.0
webpack：4.19.1
webpack-cli：3.1.1
@ babel / core：7.1.0
babel-loader：8.0.2
可加载的内容：5.5.0

编辑：

因此，我意识到react-loadable的服务器端部分实际上不起作用，因为它无法获取要包含的捆绑软件列表。原因是Loadable.Capture不会触发report回调，因此modules数组将为空。

Answer 1

事实证明，我犯了一个非常基本的错误，那就是我在定义react应用之后但在呈现之前尝试在服务器端使用getBundles。因此很显然，report回调并未在渲染时被调用。在更改代码以在渲染后得到包后，它工作正常（尽管我仍然遇到包重复的问题，但是我可以轻松地对其进行过滤）。

Answer 2

如果András的解决方案不能解决问题。然后在您提供的.html文件中，确保在供应商和主捆绑包之前可以使用块的脚本。因此，请在供应商和主JS之前重新排序大块JS。

<script src="chunk.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>

可加载的警告文本内容不匹配

2 个答案: