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 ReCAPTCHA placeholder element must be an element or id #181 (comment)

Related

• Rendering the same form twice on the page gives a captcha already been rendered error #229
• ReCAPTCHA placeholder element must be an element or id #181
• recaptcha__en.js:411 Uncaught Error: reCAPTCHA has already been rendered in this element escaladesports/legacy-gatsby-plugin-recaptcha#1

[fresquer]

@philonor as I found here #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:
gatsbyjs/gatsby#309

[senorgeno]

Using a unique elementID worked for me.