1

I am currently trying to code split for react server side rendering. Everything works fine except the refreshing part. When I refresh the page, Everything shows in server side. However, the split second right before client side takes over the lazy loading component is gone then it show up when client side start rendering again.

"webpack": "^4.4.0", "mini-css-extract-plugin": "^0.4.0",

react-loadable.json part

{
  "undefined": [
    {
      "id": 2,
      "name": null,
      "file": "styles.css",
      "publicPath": "/dist/styles.css"
    }
   ...
  ]
}

webpack chunk option for style styles: { name: 'styles', test: /.css$/, chunks: 'all', enforce: true },

Server.js react-loadable setup part

 let modules = []
      const context = {}
      const htmlRoot = (
        <Provider store={store}>
          <StaticRouter location={urlPath} context={context}>
            <Loadable.Capture report={moduleName => modules.push(moduleName)}>
              <AppRoot />
            </Loadable.Capture>
          </StaticRouter>
        </Provider>
      )

      const bundles = getBundles(stats, modules)
      console.log(bundles, modules)

Even though all the pages are loaded correctly, the bundles variables are always empty array. Anyone know how to fix this problem? or what might cause this problem?

fiddlest
  • 1,262
  • 2
  • 17
  • 42

1 Answers1

0

Your problem is that you define your htmlRoot, but you don't render it before calling getBundles. Loadable.Capture collects the bundles when the app (and so itself) is rendered, that's why your modules array is empty. Call getBundles after you rendered the app (e.g. ReactDOMServer.renderToString) and the modules array should be populated.

I also found that there are some undefined entries in react-loadable.json, but they don't cause any problems for react-loadable.

András Geiszl
  • 966
  • 2
  • 16
  • 36
  • If a working example helps, I also use `react-loadable` in my project (https://github.com/geiszla/react-website-starter) (although planning to switch to `loadable-components`, as it has much simpler server-side API). – András Geiszl Oct 02 '18 at 15:12
  • Only shared ones are undefined. For example, the bundle is shared and named like this page1~page2~page3.css. That file will only be fetched in client side – fiddlest Mar 04 '19 at 16:50