0

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

Improve this question
2
  • The really nice thing about those React errors is that they provide you a link to documentation that includes details about the issue/error and it provides suggestions/solutions to resolve them.
    – Drew Reese
    Commented Mar 31, 2024 at 17:56
  • @Drew Reese, I know how to use link of React errors. I don't ask for details about this error. Already know from where it is comes and why . React doesn't provide a suggestion/solution for this. As i mentioned above, it is comes from "gtag('js', new Date())". I can remove this "new Date()" in gtag and error disappear. But it is not a solution.
    – Yura Chim
    Commented Apr 1, 2024 at 8:36

1 Answer 1

Reset to default
0

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>
Improve this answer
3
  • 1
    Didn't work for me. I mean it is renders on client, but don't send events to GA
    – Yura Chim
    Commented Apr 2, 2024 at 13:16
  • Renders but does not initiate scripts. Does not work expected.
    – emirefek
    Commented Jun 16, 2024 at 11:18
  • yes same he @YuraChim . it renders on client (DOM). but not firing events.
    – jsdev
    Commented Nov 2, 2024 at 5:32

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.