Cannot read properties of undefined (reading 'clients')
FreddieFruitSticks opened this issue · 3 comments
FreddieFruitSticks commented
react-google-recaptcha version: 3.1.0
react-async-script version: N/A
If I load the ReCaptcha, hit submit (taking me to the next page), then click browser back, I get the following error
Cannot read properties of undefined (reading 'clients')
I've tried the following;
- grecaptcha.reset() the google recaptcha
- I tried to reload the recaptcha from the window by calling
window.grecaptcha.reset()
- conditionally render the recaptcha based on a boolean
- Tried reloading the recaptcha from its ref
const recaptchaRef = useRef(null);
const resetCaptcha = () => {
if (recaptchaRef.current) {
//@ts-ignore
recaptchaRef.current.reset();
}
};
<ReCAPTCHA
ref={recaptchaRef}
hidden={!v3Failed}
sitekey="..."
onChange={() => {
setV2Succeeded(true)
resetCaptcha()
}}
onError={() => setV2Succeeded(false)}
onExpired={() => setV2Succeeded(false)}
/>
dhruvpatel2636 commented
i got the same error have you solved it then tell me pls how to solve this.
FreddieFruitSticks commented
I eventually had to remove the component completely when navigating away from the page.
I conditionally rendered my button wrapped in the GoogleRecaptureProvider
.
{activeStep === 2 ? (
<>
<GoogleReCaptchaProvider scriptProps={
{
async: true,
defer: true
}
} reCaptchaKey="...">
<SubmitButton/>
</GoogleReCaptchaProvider>
</>
) : <Button>
Next
</Button>}