Hydration errors when using Script component with getSeoMeta

[stevenbister]

What is the location of your example repository?

https://github.com/stevenbister/hydrogen-hydration-errors

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.6

What version of Remix are you using?

2.9.2

Steps to Reproduce

Add the required secrets and add the GTM ID to the GTM script in the root.tsx and run the app with npm run dev.

Open the dev tools and go to the console

Expected Behavior

I would expect there should be no errors logged in the console

Actual Behavior

When using

export const meta = ({data}: MetaArgs<typeof loader>) => {
  return getSeoMeta(data!.seo as SeoConfig);
};

along with

       <Script
          dangerouslySetInnerHTML={{
            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-***');`,
          }}
          nonce={nonce}
        />

in the demo store there is a hydration error caused that says

Warning: Prop `type` did not match. Server: "null" Client: "application/ld+json"

This error goes away if you remove the jsonLd property from the seo payload or remove the GTM script, ideally would be able to use both together

[h36ahmed]

I can also confirm on y side that there is a hydration error. Is there a fix?

[h36ahmed]

The error may be more related to the Script tag. I tried using another third-party script, which still gave me hydration errors. I also believe that hydration errors start to appear when you do dangerouslySetInnerHTML. I loaded a script with only src and there were no issues.

[blittle]

I spent some time trying to preproduce this and was unable to. Could you please provide a Github Repo or a more complete example? I recommend loading 3rd party scripts with useLoadScript which delays loading the script until after hydration.

[blittle]

Closing due to lack of feedback.

[lluisgassovillarejo]

Hi @blittle , we are still seeing this issue. I am not sure if you'd be keen to do a screen share to see it, or if there is another way I can help you reproducte the problem.

Thanks.

[blittle]

Hi @blittle , we are still seeing this issue. I am not sure if you'd be keen to do a screen share to see it, or if there is another way I can help you reproducte the problem.

Thanks.

@lluisgassovillarejo the more specifics you can give with the problem narrowed down. Easiest would be to generate a new project via npm create @shopify/hydrogen@latest. Modify the project to produce the hydration error. Then share that repo.

[lluisgassovillarejo]

Thanks @blittle ,

Although I managed to replicate the error, it is prooving very elusive. I will update this if I come across it again. Otherwise, I think we can close this one.

Apologies for the inconvenience.

[blittle]

Make sure to use an incognito window when testing hydration errors, because browser extensions can erroneously cause them.