Does not work with async components (react-loadable)

[FelixKuehl]

This library seems not to work with dynamically loaded components. Use case: I have a create-react-app set up with react-snapshot. When i use react-loadable to split the bundles upon routes, the pages are not getting crawled anymore. Only index and 404 are getting crawled and those just are empty or show the loading component that i use for the loadable components.

I tried to load the components before rendering but

Loadable.preloadReady().then(() => {
  ReactDOM.hydrate(<App/>, document.getElementById('app'));
});

results in "'render' from react-snapshot was never called. Did you replace the call to ReactDOM.render()?"

Is there any recommended way to accomplish this?

[FelixKuehl]

As an addition: I tried to modify the render function like this:

const render = (rootComponent, domElement) => {
  if (
    navigator.userAgent.match(/Node\.js/i) &&
    window &&
    window.reactSnapshotRender
  ) {
    Loadable.preloadAll().then(() => {
      domElement.innerHTML = ReactDOMServer.renderToString(rootComponent)
    })
    window.reactSnapshotRender()
  } else {
    Loadable.preloadReady().then(() => {
      hydrate(rootComponent, domElement)
    })
  }
}

This at least makes the snapshots render again. However, all the chunks are included as Githubissues.

Githubissues is a development platform for aggregating issues.