Cannot read property 'style' of null

react-google-recaptcha version: 1.0.5 react-async-script version: N/A

This error only seems to happen when recaptcha suspects that I’m a robot and shows me the annoying pictures of cars/buses/etc.

This is the error:

Uncaught TypeError: Cannot read property 'style' of null
    at B (VM952 recaptcha__en.js:181)
    at iC.<anonymous> (VM952 recaptcha__en.js:482)
B @ recaptcha__en.js:181
(anonymous) @ recaptcha__en.js:482
setTimeout (async)
a @ recaptcha__en.js:106
f0 @ recaptcha__en.js:482
BG @ recaptcha__en.js:484
t.NP @ recaptcha__en.js:506
r.W @ recaptcha__en.js:325
(anonymous) @ recaptcha__en.js:325
jN @ recaptcha__en.js:12
next @ recaptcha__en.js:12
G @ recaptcha__en.js:14
Promise.then (async)
w @ recaptcha__en.js:14
(anonymous) @ recaptcha__en.js:14
cs @ recaptcha__en.js:14
$v @ recaptcha__en.js:13
Qa @ recaptcha__en.js:325
(anonymous) @ recaptcha__en.js:322
VA @ recaptcha__en.js:90
A2 @ recaptcha__en.js:92
J2.G @ recaptcha__en.js:89

My code:

            <ReCAPTCHA
              ref={e => (this.recaptchaInstance = e)}
              sitekey="my-key"
              size="invisible"
              onChange={this.verifyCaptchaCallback}
              onExpired={() => this.recaptchaInstance.reset()}
              onErrored={err => console.error(`Recaptcha error: ${err}`)}
            />

executeCaptcha = () => {
    this.recaptchaInstance.execute()
}

verifyCaptchaCallback = async response => {
  ...
}

The error doesn’t seem to have any negative effect, so it seems to match what’s written here (https://github.com/google/google-api-javascript-client/issues/281), i.e, that it can be ignored. But that same issue seems to mention a fix: https://github.com/google/google-api-javascript-client/issues/281#issuecomment-339077537

So maybe this library can use this fix?

[joepaynes]

Is there any update on this issue? I’m continuing to get this error when Recaptcha suspects that I’m a robot and shows me the annoying pictures of cars/buses/etc.

<ReCAPTCHA
        ref={recaptcha}
        onErrored={() => authError({ code: "recaptcha" })}
        onChange={(value) => {
          let data = { token: value };
          entranceLoading(true);
          verifyRecaptcha(data).then((res) => {
            recaptcha.current.reset();
            if (res.data.success) {
              submitFunc.submit();
            } else {
              authError({ code: "recaptcha" });
            }
          });
        }}
        size="invisible"
        sitekey={...}
      />

[MrgSub]

The only thing that worked for me is setting a timeout before resetting the recaptcha

setTimeout(() => recaptchaRef.current.reset(), 500);

Not the best approach, and not 100% crash-free but it doesn’t crash every time.