#StackBounty: #reactjs #webpack #webpack-4 #react-loadable React loadable server side rerendering and refetching when browser takes over

Bounty: 50

I have been trying to use react loadable library with Webpack 4.
On the SSR the page loaded correctly(all async import stuff loaded).
However, the async components are gone for a split sec.
react-loadable.json does not seems to have correct info since it does not fetch all the required chunks for the page(somehow shows correctly in server side). When I console.log chunks only few chunks shows up.
Could this because some route is dynamic?

Please look at attached screen shot below

Initiated by Script is the refetching part

enter image description here
Parse is happening in server side and script part happens in client side

How I capture the required chunks from react-loadable.json

  renderToString(
            <Provider store={store}>
              <StaticRouter location={urlPath} context={context}>
                <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                  <AppRoot/>
                </Loadable.Capture>
              </StaticRouter>
            </Provider>
          )



console.log('last',  getBundles(stats, modules))

Prod Server

Loadable.preloadAll().then(() => {
  app.listen(PROD_PORT, (error) => {

  })
});

Client side

Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })

Split Chunks setup

    styles: {
      name: 'styles',
      test: /.css$/,
      chunks: 'all',
      enforce: true
    },
    vendors: {
      name: 'vendors',
      chunks: 'all',
      reuseExistingChunk: true,
      priority: 20,
      enforce: true,
      test(module, chunks) {
        const name = module.nameForCondition && module.nameForCondition();
        return chunks.some(chunk => {
          return chunk.name === 'main' && /[\/]node_modules[\/]/.test(name);
        })
      }
    },
    common: {
      name: 'app.js',
      chunks: 'initial',
      test: /.js$/,
      reuseExistingChunk: true,
    },

I would love to provide more info if it is necessary


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.