Error thrown from executeAsync() and onErrored event

[roland-cromwell]

• react-google-recaptcha version: 3.1.0
• react-async-script version: n/a
• react: 17.0.2
• next.js: 12.2.5
• formik: 2.29
• yup: 0.29.3

Can someone tell me if the problem I have is due to me not having react-async-script installed in my application? Is this a dependency I'll need to install? It's not mentioned anywhere in the docs as far as I know.

Any help with this problem would be great.

I have checked thoroughly to make sure my API key has been configured and implemented correctly

1. When a user clicks the Next button the code below runs and an error is thrown. The error being logged is undefined though.

const _recaptchaRef = useRef(null);

const handleNext = async () => {
    let reCaptchaToken;
    try {
      reCaptchaToken = await _recaptchaRef.current.executeAsync();
    } catch (error) {
      // error gets thrown here
      console.log('handleNextAction > reCaptcha error:', error);
    }
    if (reCaptchaToken) {
      // execute code
    } else {
      if (_recaptchaRef.current) {
        _recaptchaRef.current.reset();
      }
    }
  };

2. The onErrored event is firing continuously and just logging an empty array.

<ReCAPTCHA
  ref={_recaptchaRef}
  sitekey={RECAPTCHA_KEY}
  size="invisible"
  badge="inline"
  hl="en-gb"
  asyncScriptOnLoad={(value) => {
    console.log('reCaptcha asyncScriptOnLoad:', value);
  }}
  onErrored={(...errorArgs) => {
    if (_recaptchaRef.current) {
      console.log(
        'reCaptcha onErrored args:',
        errorArgs
      );
      _recaptchaRef.current.reset();
    }
  }}
  onExpired={() => {
    if (_recaptchaRef.current) {
      console.log('reCaptcha onExpired');
      _recaptchaRef.current.reset();
    }
  }}
/>

[roland-cromwell]

Closing this issue as the error was being caused by missing config on AWS which was blocking the API key.

[roland-cromwell]

Closed