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.

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