Loadable.Capture 不报告任何模块 [英] Loadable.Capture not reporting any modules

问题描述

这基本上是我所有的代码.我正在运行 Hapi 并尝试使用 react-loadable 来服务器呈现我的 React 应用程序.

This is essentially all my code. I am running Hapi and trying to use react-loadable to server render my React application.

我在这里的代码中添加了很多缺失的部分.

I have added a lot of the missing pieces to the code here.

const location = req.url.pathname
const context = {}
const modules = []

const Router = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/me" component={Profile} />
    <Route component={NotFound} />
  </Switch>
)

const App = () => (
  <StaticRouter location={location} context={context}>
    <main>
      <Header />
      <Router />
      <Footer />
    </main>
  </StaticRouter>
)

const preloadables = [ Home, Login, Profile, NotFound ]
await Promise.all(preloadables.map(preloadable => preloadable.preload()))

const html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <App/>
  </Loadable.Capture>
)

// render html

它正确呈现页面，因为我看到我的 React 应用程序呈现在我的浏览器中.尽管除非我禁用服务器上的缓存，否则我看不到路由器"的任何内容.所以第一个请求不渲染路由器，接下来的请求渲染.

It renders the page correctly, as I see my React app rendered in my browser. Although I do not see any contents of the "Router" unless I disable cache on the server. So the first request renders no router, and the following ones do.

在服务器上，console.log('modules:', modules) 总是返回 modules: [].不管缓存.所以即使我禁用缓存，刷新页面两次看到路由器工作，模块仍然是空的.

On the server, console.log('modules:', modules) returns modules: [] always. Regardless of cache. So even when I disable cache, refresh the page twice to see the router working, modules is still empty.

npm run start:server
Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

Please check the code for the LoadableComponent component.
modules []
modules []
modules []
modules []
modules []

我有点迷茫，因为它应该可以正常工作......一切看起来都很好.

I am a bit lost since it should be working.. everything looks okay.

推荐答案

今天折腾了好久，终于解决了.

Today after somehow long struggle, solved it finally.

在获得模块之前，您必须正确编写可加载组件.官方文档声明 here

Before you get modules, you have to write your loadable component correctly. Official docs declare here

Loadable({
  loader: () => import('./Bar'),
  modules: ['./Bar'],
  webpack: () => [require.resolveWeak('./Bar')],
});

或者你可以使用提供的 babel 插件.但是，就我而言，我使用的是 ts-node 并且没有使用该 babel 插件的运气，因此只有选项 1 可用.

Or you can use babel plugin provided. However, as the situation for me, i'm using ts-node and with no luck of use that babel plugin, so only option 1 is available.

写在这里是因为有人会遇到类似的问题.

Write here for someone would encounter similar problem.

(p.s. lodable-component 也依赖于 babel 插件)

(p.s. lodable-component depends on babel plugin too)

这篇关于Loadable.Capture 不报告任何模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！