React-loadable 警告文本内容不匹配

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
网络包：4.19.1
webpack-cli: 3.1.1
@babel/core: 7.1.0
babel 加载器：8.0.2
可反应加载：5.5.0

编辑：

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

Answer 1

事实证明我犯了一个非常基本的错误，那就是我试图在定义 React 应用程序之后但在渲染之前在服务器端使用 getBundles。所以很明显 report 回调没有被调用，因为它是在渲染时调用的。在我更改代码以获取 after 渲染后的包后，它工作得很好（虽然我仍然有包重复的问题，但我可以轻松地过滤它）。

Answer 2

如果 András 的解决方案不能解决问题。然后在您提供的 .html 文件中，确保块的脚本在 vendor 和 main bundle 之前可用。因此，在 vendor 和 main JS 之前重新排序 chunk JS。

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

React-loadable 警告文本内容不匹配

React-loadable warning text content did not match

javascript

reactjs

react-dom