Using `next/dynamic` for registered components causes "Did not expect server HTML to contain a <div> in <div>" error

Per the recommendation in the registering components docs, we have been trying to use next/dynamic for importing our registered components, exactly like the example shown in the docs. However, we consistently run into Did not expect server HTML to contain a <div> in <div> errors only when using these components wtih dynamic imports which are causing some weird, unexpected bugs in some of our components.

We’d really like to stick with next/dynamic if possible. Are there any known fixes that we can handle on our end? Or is this an issue with @builder.io/react?

Code stack you are integrating Builder with
Next.js 12 using ISR, React 17

Screenshots

Hi @luke.johnson !

This issue usually relates to server-rendered content being different from client-rendered content. Sometimes it is simply because on the client the builder content will temporarily be empty before populating, if you have any conditional rendering based on client-only aspects (queryParams, window, cookies) or generally any differences like that. Could any of this be related?

You can see similar articles in stack overflow: reactjs - React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>." - Stack Overflow Does this account for your issue potentially?

@TimG We ended up figuring out the cause, which has more to do with our usage of next/dynamic than with @builder.io/react. We were trying to use dynamic with a relative path from a package to dynamically import components for the consuming application. We found that the consuming application has to perform the dynamic import itself using the path to the published NPM package.

1 Like

ahh thank you for the update! And glad yall were able to get it working…let us know if you have any other questions!