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.

[dvnrsn]

Here is a repo based off gtm template. The only change is the addition of jsonLd. I also added my own GTM ID but that doesn't seem to matter.

It immediately breaks in Chrome incognito

The reason we use the same <Script as OP is because that is what seems to be recommended in the Hydrogen gtm example

[dvnrsn]

Note that something like this with useLoadScript makes me cautiously optimistic.

useLoadScript(`https://www.googletagmanager.com/gtm.js?id=GTM-abc123`);

I also wonder if this is related to general vite/remix meta issue as we're seeing this problem

remix-run/remix#9242

[therealchrisrock]

Could this be related to #2389?

[octave]

Same issue for us on shopify/[email protected].

Using <Script> with dangerouslySetInnerHTML right after <Meta> and <Links>, if we have jsonLd then it throws hydration error and this warning:

Prop 'type' did not match. Server: "text/javascript" Client: "application/ld+json" Error Component Stack