Problem with implementation of third party script

Hydrogen and Storefront APIs
1

I am trying to implement a simple newsletter registration form using app.kit.com, i already set up all the required CSP rules, im calling it on my index file like this

          <Script
            waitForHydration
            data-uid="1234"
            src="scriptSRCplaceholder"
          ></Script>

t this point the element renders correctly but it gets pushed to the very bottom of the page instead of where it was called.

If i remove waitForHydration the component renders in the correct place for a second before dissapearing and throwing a bunch of errors related to hydration like:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Hydration failed because the initial UI does not match what was rendered on the server.

am i doing something wrong?

2

Hi, the issue with third party scripts is they immediately execute and change the dom. When React Hydrates, it sees that there are changes to the DOM that it doesn’t understand, so it throws a hydration error, and re-renders the page removing all the dynamic things the script generated.

Wait for hydration delays executing the script until after react is finished Hydrating. This inherently means it won’t execute inline. Is there a particular reason you need this script to execute inline and immediately?

Depending on what the 3p script does, you might be able to get away with attaching suppressHydrationWarning as a DOM attribute to areas you know the script will modify. The challenge with that though is it needs to be added at each level of the dom:

function MyComponent() {
  return <div suppressHydrationWarning>
    <h1  suppressHydrationWarning>Some title</h1>
  </div>
}
3

Thank you for the answer, i manged to solve the problem by creating a custom component using an HTML Embed provided by Kit and calling it where i needed it, it took a bit of work to format it to Hydrogen specifications but i managed to get it working properly.

1 Like