Search code examples
javascriptreactjsreact-dom

React-loadable warning text content did not match

I use react-loadable for dynamically loading JS modules. I also use server-side rendering, which is set up and works for react-loadable. On the client side, however, there seems to be a problem, because when I load the page a warning appears in the console:

Warning: Text content did not match. Server: "Choose a name and enter passwordNamePasswordLogin" Client: "Loading..."

I use preloadReady on the client side, which should prevent this error.

My index.jsx looks like this:

import { preloadReady } from 'react-loadable';

window.addEventListener('load', async () => {    
  await preloadReady();

  hydrate(
    <App />,
    document.getElementById('root')
  );
});

Package versions:

  • Node: v8.12.0
  • webpack: 4.19.1
  • webpack-cli: 3.1.1
  • @babel/core: 7.1.0
  • babel-loader: 8.0.2
  • react-loadable: 5.5.0

Edit:

So I realized, that the server-side part of react-loadable doesn't actually work, because it can't get the list of bundles to include. The cause of this is that Loadable.Capture doesn't fire the report callback, and so the modules array will be empty.

Solution

  • It turned out that I made a very basic mistake, which was that I tried to use getBundles on the server side after the react app was defined, but before it was rendered. So obviously the report callback wasn't called as it is called at render time. After I changed the code to get the bundles after rendering, it works just fine (although I still have the problem of bundle duplicates, but I can easily filter that).