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
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?
@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.