Hydration errors with Google Analytics | Remix | Page 1

round tulip Nov 9, 2022, 5:34 PM

#

So, GA is giving me the business.
My implementation basically looks like https://github.com/remix-run/examples/blob/main/google-analytics/app/root.tsx, and I'm getting the following hydration error :

#

react-dom.development.js:86 Warning: Prop `src` did not match. Server: "https://www.google-analytics.com/analytics.js" Client: "https://www.googletagmanager.com/gtag/js?id=UA-1111111-1"
    at script
    at head
    at html
    at App
    at RemixRoute (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:2655:3)
    at Routes2 (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:2639:7)
    at Router (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:727:15)
    at RemixCatchBoundary (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:1058:10)
    at RemixErrorBoundary (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:1099:9)
    at RemixEntry (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:2533:12)
    at RemixBrowser (https://www.automobile.lcl/build/_shared/chunk-ZTU4UPU3.js:3391:27)

#

The weird thing is that Server/Client seems to be inverted in the error message

#

Server replies with <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-1111111-1"></script>

#

and analytics gets called from the client as we can see in the request initiator chain

#

Screen_Shot_2022-11-09_at_6.36.45_PM.png

#

how do I get out of this one?

#

This is the last problem I need to tackle before swapping a first PHP/jQuery page with its Remix counterpart 🤕

eager dock Nov 9, 2022, 5:49 PM

#

gtag('config', '${gaTrackingId}', {

#

try
gtag('config', gaTrackingId, {

round tulip Nov 9, 2022, 5:50 PM

#

that would bread, gaTrackingId is a string, needs to be quoted

#

and I don't think the problem is there

eager dock Nov 9, 2022, 5:50 PM

#

ah right,

round tulip Nov 9, 2022, 5:50 PM

#

https://www.googletagmanager.com/gtag/js?id=UA-1111111-1 loads the analytics.js script

eager dock Nov 9, 2022, 5:51 PM

#

I'm comparing it to our gtag implementation and can't spot anything obvious either.

#

Have you try just hardcoding gaTrackingId and see if the error goes away?

#

Might narrow down the issue.

round tulip Nov 9, 2022, 5:52 PM

#

Are you on React 17 by any chance ?

eager dock Nov 9, 2022, 5:52 PM

#

yep

round tulip Nov 9, 2022, 5:52 PM

#

that's it then

#

I'm on React 18 ..

#

think I'm going to rollback to 17

#

have another app running it, and no problems with analytics

eager dock Nov 9, 2022, 5:53 PM

#

It's been a year plus and React18 is still buggy.

round tulip Nov 9, 2022, 5:53 PM

#

I think for this particular problem, the remix team is thinking of not hydrating the root element anymore

storm mist Nov 10, 2022, 6:10 AM

#

Currently, I using trick below to prevent hydration error.
But I think this is a bug on React team.

type ClientOnlyScriptProps = ComponentProps<"script">;
function ClientOnlyScript(props: ClientOnlyScriptProps) {
  const html = props.dangerouslySetInnerHTML?.__html;

  if (!html) return null;
  return (
    <script
      ref={(ref) => {
        if (!ref) return;
        ref.innerHTML = html;
      }}
    />
  );
}

//...

        <ClientOnlyScript
          dangerouslySetInnerHTML={{
            __html: getGAScript(data.ENV.GA_ID),
          }}
        />

#Hydration errors with Google Analytics