Cannot read property 'style' of null

tzachshabtay commented 5 years ago

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?

benp84 commented 4 years ago

I've been having the same problem. It seems to be happening during the reset() call, except when it's called immediately on receipt of the token.

Initially I was verifying the token with my server upon receipt, and resetting the widget after the server responded. This resulted in the "Cannot read property 'style' of null" error. I figured out if I reset the widget immediately on receipt of the token then the error goes away. It must be that reset() needs to run before some other queued code.

<html>
    <head>
        <script src="https://www.google.com/recaptcha/api.js"></script>
        <script>
            function submit() {
                console.log('submitted');
                window.grecaptcha.execute();
            }
            function onTokenReceived(token) {
                console.log('token received');
                window.setTimeout(function() {// <-- remove this delay and the error goes away
                    window.grecaptcha.reset();
                });
            }
        </script>
    </head>
    <body>
        <div class="g-recaptcha"
             data-sitekey="[YOUR RECAPTCHA V2 SITE KEY]"
             data-callback="onTokenReceived"
             data-size="invisible">
        </div>
        <button onclick="submit()">Submit</button>
    </body>
</html>

joepaynes commented 4 years ago

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 commented 3 years ago

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.

developdeez commented 2 years ago

Same issue I noticed it after the user submits a verification code. Google has known about this issue for a while and doesnt seem to intend to fix it.

1BrandonCummings commented 2 years ago

Same issue is still happening.

Error is only thrown when prompted to select images.

iankitverma commented 2 years ago

Is there any way to fix this issue?

benjamincharity commented 2 years ago

This ticket has been open for 3 years. Can we get some feedback from the maintainer(s)?

AndrasE commented 2 years ago

06/2022 same issue

JAlexHouse commented 2 years ago

Also having issue still, any updates?

Tathagat017 commented 1 year ago

same issue : caught TypeError: Cannot read properties of null (reading 'style') at Array. (recaptchaen.js:170:337) at VU. (recaptchaen.js:126:86)

avjabalpur commented 1 year ago

Hey, I was getting the same issue, but it is because of I was changing my component just after button click

Try this.. Verify that you've included the reCAPTCHA component within a valid DOM element in your code.

nunsinee commented 5 months ago

Anyone know about this targomo-googlemaps.umd.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'style') at eval (targomo-googlemaps.umd.min.js:6:10049) at eval (targomo-googlemaps.umd.min.js:6:9175)

yubinjodev commented 5 months ago

Still not fixed in 2024!

dozoisch / react-google-recaptcha

Cannot read property 'style' of null #129