我使用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/核心：
7.1.0 - 通天塔装载机：
8.0.2 - 可反应加载：
5.5.0
编辑：
所以我意识到，react-loadable的服务器端部分实际上不起作用，因为它无法获得要包含的捆绑包列表。原因是Loadable.Capture不会触发report回调，因此modules数组将为空。
事实证明，我犯了一个非常基本的错误，那就是我试图在定义 react 应用程序之后但在渲染之前在服务器端使用getBundles。所以很明显，report回调没有像渲染时那样被调用。在我更改代码以在渲染后获取捆绑包后，它工作得很好(尽管我仍然有捆绑包重复的问题，但我可以轻松过滤它(。
如果安德拉斯的解决方案不能解决问题。然后在您提供的.html文件中，确保块的脚本在供应商和主捆绑包之前可用。因此，在供应商和主JS之前重新排序块JS。
<script src="chunk.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>