Hydration failed because external script changes DOM

[vaneenige]

Hey!

We're trying to implement Cookiebot in one of our websites, but we're stuck with hydration errors. At first we included the script directly (which failed) and also tried with GTM, but it won't work.

We think this is caused by the external script altering the DOM. For example, now we have GTM:
Returned from the server: <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX">
But on the client we get this error: Prop `src` did not match. Server: "https://www.google-analytics.com/analytics.js" Client: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"

Moving the script around, adding keys/ids all had no success..

Any suggestions for us to make this work? 🙌

[LukeXF]

I am also having the same error, any suggestions?

[nfragkos]

As a workaround I'm loading GTM on the client side only with useEffect:

import { useLocation } from '@remix-run/react'
import { useEffect } from 'react'

export function ExternalScripts(props: { environment: string; gtmTrackingId: string | undefined }) {
  const location = useLocation()
  const { environment, gtmTrackingId } = props

  useEffect(() => {
    if (environment !== 'development' && gtmTrackingId?.length) {
      const gtmScript = document.createElement('script')

      gtmScript.innerHTML = `
        (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', '${gtmTrackingId}');`

      document.head.appendChild(gtmScript)

      return () => {
        document.head.removeChild(gtmScript)
      }
    }
  }, [location, gtmTrackingId])

  return environment === 'development' || !gtmTrackingId ? null : (
    <>
      {/* GOOGLE TAG MANAGER NOSCRIPT */}
      <noscript>
        <iframe
          src={`https://www.googletagmanager.com/ns.html?id=${gtmTrackingId}`}
          height="0"
          width="0"
          style={{ display: 'none', visibility: 'hidden' }}
        />
      </noscript>
    </>
  )
}

[clgeoio]

I've made another discussion here with a suggestion too #5244