Cannot read properties of undefined (reading 'clients')

[FreddieFruitSticks]

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;

1. grecaptcha.reset() the google recaptcha
2. I tried to reload the recaptcha from the window by calling window.grecaptcha.reset()
3. conditionally render the recaptcha based on a boolean
4. 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]

i got the same error have you solved it then tell me pls how to solve this.

[FreddieFruitSticks]

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>}

[yuenu]

If you are using antd's Modal component and encounter issues with delayed rendering or state inconsistency, try adding the forceRender property.

ref

<Modal forceRender {...otherProps}> // add here
  <Form>
     {/* Modal Content */}
  </Form>
</Modal>