Getting warning: Did not expect server HTML to contain a <div> in <div>

Hello there, thank you for this remarkable library 😃

I am using this library with razzle@3.0.0 (React 16.9.0) and I’ve successfully done all four steps from this guide: https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/#guide

But, in dev mode, I am still getting this warning Warning: Did not expect server HTML to contain a <div> in <div>. in browser console (production build seems to be ok, but there might be supressed warning). So SSR HTML does not match HTML hydrated on client side.

After isolation of this this issue, the cause is this code: const Home = loadable(() => import('./Home'))

Could you give me some hints how to solve it please?

Thank you! 🙏

[nrei0]

Hello. I have seems like same problem. const AsyncIcon = loadable(({ name }: AsyncIconProps) => import(…/…/static/svg/${name}.svg), { ssr: true, fallback: <span>Loading</span> });

• If ssr: false works well, SSR returns fallback, Client renders fallback and then loads chunks and display actual component.
• If ssr: true, SSR returns actual component, which is correct, BUT Client is still trying fetch chunks which is incorrect and of course difference that on Client displays Fallback first.

[fuzing]

I suspect that you might be running into the same problem as me (I haven’t yet found a solution)… however, it appears that when code splitting with webpack, webpack’s import returns an unresolved Promise even when the imported module/chunk is already downloaded. The promise resolves a short time later, but not until after the first react render, meaning that your loadable component will render its fallback, or null (which is likely different to what you just rendered on the server).

On the client: console.log(yourReactParentNode.innerHTML); hydrate(........); console.log(yourReactParentNode.innerHTML);

May or may not confirm this (there’s a time race, so it may NOT). Even if webpack were to return a resolved Promise in the event that the module/chunk is already present in the browser, it’s unclear whether this would solve the problem because the Promise’s “then” method may not be called until some time later (JS implementation dependent).

So, for example, in chrome: Promise.resolve().then(() => { console.log("Resolved"); }); console.log("After"); results in: After Resolved