Hydration failure with external scripts

[lapis spire]

We're currently in the process of rebuilding our company's application in Remix based upon the Grunge Stack. As part of this we use a number of external services including; Google Tag Manager, Intercom which require a simple JS script to be added, however when doing so, it results in a hydration failure.

This appears to be the same as https://github.com/remix-run/remix/discussions/3179.

We have investigated other approached and neither of the following alternative solve the problem:

• https://github.com/sergiodxa/remix-utils#externalscripts
• https://github.com/remix-run/examples/blob/main/google-analytics/app/root.tsx

I appreciate this is an ongoing issue, but is there any workaround to use an external script without causing hydration issues?

Note; The grunge stack is is deployed onto AWS Lambda & leverages React 18.

[lapis spire]

@tardy oxide have you experienced anything similar? I'm thinking this is a React 18 thing 🤔

@placid star could this issue invalidate the Google Analytics example?

[tardy oxide]

GTM is causing the hydration issue

because it changes the HTML before React loads

[lapis spire]

Damn Google.

[tardy oxide]

all of those analytics tools do the same

[lapis spire]

@tardy oxide do we have a workaround? I'm presuming that my use case is a fairly common one

[tardy oxide]

I think you can use this https://partytown.builder.io

but I've never used it, I don't use React 18 yet and the hydration warning is not an issue before

[lapis spire]

Thanks for the suggestion, I'll give it a whirl. Really appreciate it.

[white verge]

Hey Sergio, are you on React 18 now?
I added party town, but there's an issue with adblockers blocking the scripts loaded from it (fetches fail)

@lapis spire did you ever come to a conclusion or solution?

[tardy oxide]

I’m still using React 17

[white verge]

Gotcha, I was hoping I wouldn't have to roll back, but with a release planned this Friday, looks like I'll have to downgrade to 17

[white verge]

@tardy oxide By chance, could you give me your stable React, React Dom and Remix version you're using in prod?

For React 17

[tardy oxide]

React and React DOM at v17.0.2, Remix at v1.4.3 (looking to upgrade to latest Remix)

[white verge]

Solid, thanks a ton! I'm on the latest Remix build with React 18 currently, but due to being unable to get partytown to work for google tag manager (adblocker, and some random extensions break partytown, so it's unstable), I'll be reverting back to 17.

[stoic berry]

How did you go about implementing tag manager? I've been having all kinds of issues getting GA/GTM implemented and at this point I'm pretty concerned about the lack of flexibility for third-party JS

[lapis spire]

Sorry everyone seems like I missed all notifications on this topic and just stumbled across it.

TLDR, it's been a pain. Partytown didn't offer a viable solution for us.

Our use case was to accommodate Intercom but we also have GTM requirements too. For the most part we've got around the functional issues by only running those scripts if the component has mounted (similar to what's described here: https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

I think Ryan & Michael discussed Hydration issues in the Roadmap planning #3; https://www.youtube.com/live/eGWG22olL0o?feature=share&t=332

We still have errors in the console and plan to address those in due course. I'll try to return with more info once I have it (rather than posting conjecture)

[barren blade]

Thread looks dead but thought Id offer my solution to hopefully get some brainpower in the idea. Not entirely battle tested but it did remove my hydration errors and tags are firing from GTM. I followed a similar strategy as https://remix.run/docs/en/1.16.0/guides/styling#css-in-js-libraries

and replaced __GTM__ with my gtm script within entry.server.tsx

[white verge]

Very cool, I'll have to give it a test

[elder bloom]

nice solution! I found this stack that comes with google analytics so I’m going to look at how they do it https://github.com/meza/trance-stack

Ok found it https://github.com/meza/trance-stack/blob/8f82c3bf8262713ac778ed11c23ab53102ab2010/src/components/GoogleAnalytics/index.tsx#L20 the script tag takes a prop suppressHydrationWarning that they use. I've never heard about that before

Docs on suppressHydrationWarning: if you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read about suppressing hydration errors. https://react.dev/reference/react-dom/components/common#common-props honestly this seems like a valid case for that

[barren blade]

i couldn't get that suppression to actually supress.

[elder bloom]

interesting i'll start a new remix project with that template and see if it has the same problem. it makes sense to me that it might still have this problem because google injects a bunch of new scripts into the head too and those would not be covered. however if the head has that, it would cover it. but they don't add it to the head so i'm interested to see

[white verge]

This is not a solution, use remix-island to fix your problem, or use the new __STYLES__ (which I believe breaks defer, don't take my word for this, I think I read this somewhere)

[elder bloom]

It’s not “my” problem. I was just trying to help. What makes you think that can’t be a valid solution? What does remix-island do under the hood differently?

[white verge]

Supressing the hydration warning, just ignores it. It's like using @ts-ignore, Remix island seperates the rendering from your body content, and your head content. Letting them be updated independently and not triggering hydration issues, because we're no longer rehydrating the head when the body is hydrated.

Without:
Page loads (initial state) -> google loads something into the head -> comparison happens on hydration that throws the error because the head doesn't match

With:
Page loads (initial state) -> google loads something into the head -> comparison happens only on the dom node, not the document, no error

From the github

utils to render remix into a dom-node (like <div id="root"></div>) instead of the whole document

[elder bloom]

I agree. React also has issue 24430 to hopefully address this problem at the core