how to load external js like recaptcha without getting hydration error?

[tomer-yechiel]

Hi,
i tried to load recaptcha only after hydration.

        { isHydrated ? <script src="https://www.google.com/recaptcha/api.js?render=<key>" async></script> : null}

still doesnt work, does anyone figure it out?

[tomer-yechiel]

anyone?

[gustavopch]

Try with this in your root.tsx:

useEffect(() => {
  const script = document.createElement('script')
  script.async = true
  script.src = `https://www.google.com/recaptcha/api.js?render=${key}`
  document.head.appendChild(script)
}, [])

It will run after hydration and prevent a mismatch between the server and client markup.

[tomer-yechiel]

thanks!

[beachstrider]

Oh no, what a clear and straightforward solution! Why did I not think of this? I have been searching so many github discussions on that but didn't find a correct one. Maybe they already knew this hack? LOL. Thank you so much!