reCAPTCHA has already been rendered in this element

[philonor]

Description When using react-recaptcha in a GatsbyJS project and switching between pages containing the same component with a reCAPTCHA, rendering fails. It also fails when opening a direct link to one of the two pages.

Reproduction

• See repo https://github.com/philonor/gatsby-recaptcha-reproduction that is a gatsby-starter-default clone with two more pages contact-en.js and contact-de.js that both contain the same ContactForm component which uses react-recaptcha to render a recaptcha.
• Clone it, run npm i, then gatsby build && gatsby serve, then browse to http://localhost:9000/contact-de/ to reproduce the error (you may have to hit the refresh button a few times until the error occurrs).

Workarounds

• Requiring explicit rendering and specifying an onloadCallback seem to fix the issue https://github.com/appleboy/react-recaptcha/issues/181#issuecomment-280800414

Related

• https://github.com/appleboy/react-recaptcha/issues/229
• https://github.com/appleboy/react-recaptcha/issues/181
• https://github.com/escaladesports/gatsby-plugin-recaptcha/issues/1

[fresquer]

@philonor as I found here https://github.com/appleboy/react-recaptcha/issues/229 the issue is really easy to fix.

Use isBrowser of useSSR Hook https://github.com/alex-cory/use-ssr

{isBrowser && <Recaptcha/> }

[rlaphoenix]

@fernandopulsa Saved my ass!, But is there a reason we don't just do { typeof window !== 'undefined' && <Recaptcha /> } as window will be undefined when in SSR.

[fresquer]

Gatsby JS is not a SSR tool. If you try to use windows on the server will crush. To protect you for any undefined you must to use window with componentDidMount()

More info: https://github.com/gatsbyjs/gatsby/issues/309

[senorgeno]

Using a unique elementID worked for me.