javascript - 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-loader:8.0.2
• 可 react 加载:5.5.0

编辑:

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

Answer 1

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