Builder/react SDK Did not expect server HTML to contain a <div> in <div>

[anrodriguez]

Hello,

I’m seeing this error in the Dev tools console and the content is not showing in the browser. Inside the Builder Visual Editor everything is looking good and I can see the page with the content loaded correctly.

I’m using Gatsby 2.32.0 and for the @builder dependency they are all updated to the last version.

[aziz]

Hi @anrodriguez , thanks for reporting, can you share more info on your setup and what kind of content you’re previewing ( draft, published, on a url, or just a section ), it’d be perfect if you have a reproduction in a code sandbox for us to look at and help diagnose the issue.

In general the warning you shared shouldn’t cause the page to not load, and I doubt it’s related to the issue of not being able to preview in the browser outside the editor, those are usually issues in how previewing and mounting builder content is handled.

[rdonahue]

I’m getting a similar error using React and Next. It doesn’t appear to effect the content of the page. Is this an error I can ignore?

[maythee]

Hi, I’m getting this error and it’s more annoying in React 18 because now it has an error popup showing with different error messages. My sample code is here GitHub - llun/builder-bug: Sample builder.io code with div in div bug

I run this project in localhost and use my localhost url (http://localhost:3000/sample) in the builder.io and this error shows up.

[ancheetah]

Hi @maythee thank you for sharing your code! Can you please provide more reproduction steps? I wasn’t able to see any errors when I ran your Next.js app. I did notice that the [page].tsx template was set up with single brackets as a dynamic route. I renamed it to [[...page]].tsx for optional catch all routing and it worked ok for me.

[maythee]

Hi @ancheetah,

• I run next dev to start the project in localhost
• Open the builder.io editor for the page
• Copy the localhost url to the editor to see custom components
• The error box shows up

[maythee]

I tried with catch all Try catch all dynamic routes · llun/builder-bug@7d73730 · GitHub but got the same result. Is it because I run this in localhost? Do I need to push it to somewhere in the internet like vercel to use it in builder.io?

[ancheetah]

Hi @maythee, I do not see a <div> in <div> error but rather a Next.js hydration error. This gets thrown when the second client-side render does not match the initial server-side render and can occur for various reasons. One example is when adding a script with dangerouslySetInnerHTML() and not accounting for rehydration. I would suggest checking that what your rendering on the server also matches the client. If you send me a link to your /sample page I can take a look and see if anything stands out there. It should start with https://builder.io/content/. Thanks!

[maythee]

Hi @ancheetah, Here is the link to my sample page in builder.io Builder.io: Drag and drop page builder and CMS

I don’t use any dangerouslySetInnerHTML() here and the code is as you see in my github repository here GitHub - llun/builder-bug: Sample builder.io code with div in div bug.

[ancheetah]

Hey @maythee it looks like you’re missing some logic to handle when the page is loading which is needed when fallback: true in Next.js. You can take a look at our starter here to see an example of how to handle page load.

[maythee]

Hi @ancheetah, I still get errors with the loading text Add loading fallback · llun/builder-bug@f450101 · GitHub.

[ancheetah]

@maythee I see the same hydration error again since fallback is set to blocking. Can you use fallback: true?

[maythee]

@ancheetah Same error for me with fallback: true Update all dependencies and use fallback true · llun/builder-bug@82c047a · GitHub

[maythee]

Add more errors in console, the error that leads me to this post.

Also this doesn’t happen when I use https url deploys to Vercel, do I need to do something special for localhost to work?

[ancheetah]

@maythee the hydration error disappears for me if I downgrade your webapp to react and react-dom version ^16.14.0 or v17. Can you give that a try and let me know what happens? Thanks.

[ancheetah]

Also fyi I changed the preview url in your page model options to http://localhost:3000 to make this easier to debug. Feel free to change it back if you need to!

[maythee]

@ancheetah Yes I tried it, the popup disappeared however it just hid the error in the console and was not a long term solution because we can’t upgrade our dependencies.

[beamercola]

I’m having the same issue in next.js - I’ve downgraded to React 17 as a stopgap, but not a long term solution as we have dependencies on React 18.

I’m glad I’m not the only one I’m 6+ hours into debugging this

[ancheetah]

Hi all, I spoke with one of our engineers at Builder.io and we are still investigating the root cause with v18. I can let you know when we have a fix, pending the release of this pr.

[ancheetah]

Another update, we may have a fix for the React SDK but it has not been released yet. In the meantime a workaround could be to switch from SSG to SSR with getServerSideProps.

export default function Home({
  page,
  locale,
  isPreviewing
}: InferGetStaticPropsType<typeof getServerSideProps>)

  const router = useRouter();
  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  return (
    <BuilderComponent data={{locale}} model="page" {...!isPreviewing && { content: page }}/>
  );
}

export async function getServerSideProps({ params, locale = "en" , res, query }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
  const path = (params.page || []).join("/");
  const page = await builder
    .get("page", {
      userAttributes: { urlPath: `/${path}`, locale: locale },
      options: { data: { locale: locale } },
      cachebust: true,
    })
    .toPromise() || null;

  const isPreviewing = Boolean(query['builder.preview']);

  if (!page && !isPreviewing) {
    return {
      notFound: true,
    }
  }

  return {
    props: { page, locale, isPreviewing },
  }
}