Remix App - Error: Minified React error #418 / #423 - on Google Analytics gtag script

Question

I have a remix App (SSR). When i add a script for google analytics, it shows an error of hydration in production , especially on line with gtag('js', new Date()) Does anybody know another way to add this script, or remove this error?

Image Example

i tried adding suppressHydrationWarning={true} but still have error message

Answer 1

Remix renders your UI component on both the server and client, so expressions like new Date() will result in a hydration mismatch.

One way to get around this is to force Remix to only render your script tag on the client. You can use the remix-utils <ClientOnly> component.

https://github.com/sergiodxa/remix-utils#clientonly

<ClientOnly>
  {() => <script dangerouslySetInnerHtml={{_html:`...`}} />}
</ClientOnly>