Hydration error when using SSG with Custom Code component

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
6aedcdfa7b4a48d6869d32835be21d2e

What are you trying to accomplish
I’m trying to integrate a HubSpot Form onto a page, but am encountering hydration errors.

Code stack you are integrating Builder with
React/Next.js (static export)

Reproducible code example
First, insert a “Custom Code” component to the page with the following contents.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "3060771",
    formId: "ac0ee37b-c3b5-4b41-95a2-bcfc67f3f635"
  });
</script>

With the “Scripts client only” option turned on, I get this hydration error, and the HubSpot form doesn’t show up.

With the “Scripts client only” option turned off, I get this hydration error, and the HubSpot form does show up:

Reading the source code for the Custom Code block, it seems that I’d actually need something in between “Scripts client only” turned on and “Scripts client only” turned off.

If my understanding is correct:

  • When “Scripts client only” is turned on, the script tag is only injected after hydration occurs. It doesn’t appear in the server markup.
  • When “Scripts client only” is turned off, the script tag is injected and evaluated on the server side.

The behaviour I seem to need is: The script tag is injected into the server markup, but not evaluated on the server side. It doesn’t seem possible to do with the current Custom Code component.

Hey, @yongjie_glints, I can see the issue is resolved for you using the Custom Components. Is this something you would still like to look into? Looking at your use-case, I recommend using the custom components.