Open philonor opened 4 years ago
@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/> }
@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.
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()
Using a unique elementID
worked for me.
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
contact-en.js
andcontact-de.js
that both contain the sameContactForm
component which uses react-recaptcha to render a recaptcha.npm i
, thengatsby build && gatsby serve
, then browse tohttp://localhost:9000/contact-de/
to reproduce the error (you may have to hit the refresh button a few times until the error occurrs).Workarounds
onloadCallback
seem to fix the issue https://github.com/appleboy/react-recaptcha/issues/181#issuecomment-280800414Related