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

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
• 巴贝尔装载机：8.0.2
• react可加载：5.5.0

编辑：

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

Answer 1

结果，我犯了一个非常基本的错误，那就是在定义了react应用程序之后，但在呈现之前，我尝试在服务器端使用getBundles。所以很明显，report回调没有被调用，因为它是在呈现时调用的。在我修改代码以获得呈现后的包之后，它工作得很好(虽然我仍然存在包复制的问题，但我可以轻松地过滤)。

Answer 2

如果安德拉斯的解决方案不能解决这个问题。然后，在所提供的.html文件中，确保块的脚本在供应商和主包之前可用。因此，在供应商和主JS之前重新订购块JS。

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