我使用 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 -
react-loadable：
5.5.0
Edit:
所以我意识到， react-loadable 的服务器端部分没有得到要包含的包列表 . 原因是 Loadable.Capture 不会触发 report 回调，因此 modules 数组将为空 .
1 回答
事实证明，我犯了一个非常基本的错误，就是我在定义了反应应用程序之后但在呈现之前尝试在服务器端使用
getBundles. 显然report回调没有被调用，因为它在渲染时被调用 . 我在渲染后更改代码以获取包后，它工作正常（虽然我仍然有捆绑重复的问题，但我可以轻松地过滤它） .