title: Webpack 4 and react loadable does not seems to create correct chunk for server side rendering
body: <p>I am trying to create an ssr react app with lazy loading import.
  Everything works fine except it <strong>does not fetch all the required chunks</strong>.</p>
  
  <p>I am also wondering if this is related to a dynamic component, which is base on server response</p>
  
  <p><strong>Edit - It actually renders all the required chunks but it wipes out the whole thing when client-side takes over and renders again</strong></p>
  
  <p>Since it re-renders all it slows down by a lot.</p>
  
  <p><a href="https://i.stack.imgur.com/kY6C5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kY6C5.png" alt="enter image description here"></a></p>
  
  <p>The parser happens on server-side and when client-side takes over it fetches more
  <strong>server.js</strong></p>
  
  <pre><code> const history = createHistory({
      initialEntries: [urlPath],
    })
    // const history = createHistory()
    const store = configureStore(history, {
      location: {
          ...
      },
  
    })
  
    const context = {}
    const htmlRoot = (
      &lt;Provider store={store}&gt;
        &lt;StaticRouter location={urlPath} context={context}&gt;
          &lt;AppRoot /&gt;
        &lt;/StaticRouter&gt;
      &lt;/Provider&gt;
    )
  
    // pre fetching data from api
    store
      .runSaga(rootSaga)
      .done.then(() =&gt; {
  
          const RTS = renderToString(htmlRoot) + printDrainHydrateMarks()
          const head = Helmet.renderStatic() 
          console.log(printDrainHydrateMarks())
  
          res.status(code).send(renderDom(RTS, port, host, storeState, head))
        }
      })
      .catch(e =&gt; {
        console.log(e.message)
        res.status(500).send(e.message)
      })
  
    renderToString(htmlRoot)
    console.log(printDrainHydrateMarks())
  
    store.close()
  } else {
    res.status(500).send(_err)
  }
  </code></pre>
  
  <p><strong>Prod Server</strong> </p>
  
  <pre><code>Loadable.preloadAll().then(() =&gt; {
    app.listen(PROD_PORT, (error) =&gt; {
  
    })
  });
  </code></pre>
  
  <p><strong>Client side</strong></p>
  
  <pre><code>Loadable.preloadReady().then(() =&gt; {
      hydrate(
        &lt;Provider store={store}&gt;
          &lt;ConnectedRouter history={history}&gt;
            &lt;AppRoot /&gt;
          &lt;/ConnectedRouter&gt;
        &lt;/Provider&gt;,
        domRoot,
      )
    })
  </code></pre>
  
  <p><strong>Split Chunks setup</strong></p>
  
  <pre><code>    styles: {
        name: 'styles',
        test: /\.css$/,
        chunks: 'all',
        enforce: true
      },
  </code></pre>
  
  <p>Any opinion or advice is welcome please</p>
  
  <p>Someone suggested to try with window.onload = () => {  but this approach seems slow down as well.</p>