React SSR代码拆分：Lodable.Capute未捕获模块名称

Question

我在代码拆分模块中使用react-lodable，但整个故事在服务器端都存在问题，看来当我在server.js文件的节点服务器中使用这段代码时：] >

let modules = []

const markup = renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <StaticRouter location={req.url} context={{}}>
      <App />
    </StaticRouter>
  </Loadable.Capture>
)

console.log(modules) // this is always an empty array
React Lodable无法捕获模块，并且modules始终为空数组。我读过很多关于此问题的主题，有人说您应该正确导入组件here。另一方面，文档说，如果您在react-lodable/babel文件中导入.babelrc预设，则可以解决此问题。 我已将其添加到babelrc文件中

，但没有任何更改；它仍然是空的。

这里是我的惰性加载组件之一：

import React from 'react'
import Loadable from 'react-loadable'


const B_async = Loadable({
  loading: () => <h1>loading B...</h1>,
  loader: () => import('./B.component')
})


export default B_async
为什么我的Lodable捕获模块不能？

我在代码拆分模块中使用react-lodable，但是整个故事在服务器端都存在问题，似乎当我在node.server文件中的server.js文件中使用这段代码时：。 ..

Answer 1

在服务器端使用Loadable.preloadAll（）可能会解决您的问题。