evenchange4 / react-grecaptcha

React.js Google reCAPTCHA v2 integration component.
https://react-grecaptcha.netlify.com
MIT License
51 stars 8 forks source link

"Uncaught Error: reCAPTCHA has already been rendered in this element" in StrictMode #128

Closed srghma closed 6 months ago

srghma commented 6 months ago
import Recaptcha from 'react-recaptcha'

// throws "Uncaught Error: reCAPTCHA has already been rendered in this element" in StrictMode
//
// because in StrictMode all components are rendered twice

// Uncaught Error: reCAPTCHA has already been rendered in this element
// at recaptcha__en.js:303:80
// at t.value (react-recaptcha.js:1:1)
// at t.value (react-recaptcha.js:1:1)
// at invokeLayoutEffectMountInDEV (react-dom.development.js:25133:1)
// at invokeEffectsInDev (react-dom.development.js:27351:1)
// at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27327:1)
// at flushPassiveEffectsImpl (react-dom.development.js:27056:1)
// at flushPassiveEffects (react-dom.development.js:26984:1)
// at commitRootImpl (react-dom.development.js:26935:1)
// at commitRoot (react-dom.development.js:26682:1)

// even this doesnt help
// const MemoizedRecaptcha = React.memo(Recaptcha, function (oldProps, newProps) {
//   const output = oldProps.sitekey === newProps.sitekey
//   console.log({ oldProps, newProps, output })
//   return output
// })

<Recaptcha
  sitekey={recaptchaSiteKey}
  render='explicit'
/>
srghma commented 6 months ago

wrong package