react-loadable.json with mini css plugin return undefined on styles

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/51467633/react-loadable-json-with-mini-css-plugin-return-undefined-on-styles

标签

reactjs

server-side

react-loadable