Uncaught (in promise) TypeError: Cannot read properties of undefined (reading my site key)

[Hamin-Jeon]

I want to use 'recaptcha' only for Join Component.
If you attempt to mount the Join Component again after the component is unmounted, an error occurs.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading my site key)

my code

// JoinPage.tsx
const JoinPage = () => {
    return (
        <GoogleReCaptchaProvider
             reCaptchaKey={process.env.REACT_APP_RECAPTCHA_KEY as string}
             container={
                 {
                     parameters:{
                         badge:'bottomright',
                     }
                 } 
             }    
             scriptProps={{ async: true, appendTo:"body" }}
         >
             <Join />
         </GoogleReCaptchaProvider>
    )        
}

import { useNavigate } from 'react-router-dom';
const Join = () => {
    const navigate = useNavigate()
    const { executeRecaptcha } = useGoogleReCaptcha();

    const handleReCaptchaVerify = useCallback(async () => {
        if (!executeRecaptcha) {
            console.log('Execute recaptcha not yet available');
            return;
        }

        const getToken = await executeRecaptcha('homepage');
        setRe_Token(getToken)
    }, [executeRecaptcha]);

    useEffect(() => {
        handleReCaptchaVerify();
    }, [handleReCaptchaVerify]);
    
    return (
        <form>...</form>
        <button onClick={() => navigate('/')}>component unmount</button>
    )
}

[RemiKalbe]

Same issue

[oszlanyikornel]

I have the same issue

[cotwitch]

Same here.
react-google-recaptcha-v3: 1.10.1

Hook is used only on one page, so it's not used app-wide.

It's happening on navigation / changing route (respectively, when page with recaptcha is loaded, then navigated away to other page and then navigated back to the page with recaptcha) . I'm using Next.js.
next: 13.1.6
react: 18.2.0
react-dom: 18.2.0
nodejs: 18.16.0

[edx-mostafa-eltahawy]

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'auto_render_clients')

I am getting this error too and my code is almost similar to the code above

[safaksonmez]

Same here. react-google-recaptcha-v3: 1.10.1

Hook is used only on one page, so it's not used app-wide.

It's happening on navigation / changing route (respectively, when page with recaptcha is loaded, then navigated away to other page and then navigated back to the page with recaptcha) . I'm using Next.js. next: 13.1.6 react: 18.2.0 react-dom: 18.2.0 nodejs: 18.16.0

same for me too it wasn't like that last week but certainly when I navigate between routes it throws error like this not on first load

[edx-mostafa-eltahawy]

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'auto_render_clients')

I am getting this error too and my code is almost similar to the code above

I used the version 1.9.7 instead and the problem got solved

[cotwitch]

@t49tran 🥺❓

[cotwitch]

Maybe that problem is underlaying in "not-reusing previously generated token" (and trying to generate a new one again, on re-mount)?
I'm suspicious about that, when you're requesting a new token (by re-navigation and re-mounting component which is using recaptcha) and you did not actually used the first one ... problem appears. (Because, in this way, you could pre-generate very large amount of captchas and use them later, on-demand :) )

So, try to save firstly generated token ... and on component re-mount ... do not call executeRecaptcha ... and try to re-use the firstly generated token ... It's just guess.

(by the way, I'm currently "solving" (workarounding, respectively :D) above TypeError by placing executeRecaptcha into try/catch statement.)

Hope this helps at least temporairly to someone.

If i can elaborate more on this, I think that documentation uses Recaptcha's Context/Provider in App-wide manner ... but we, who got into the problems are probably using it just on per-page basis, so, re-mounting causing troubles.
When you're using Context/Provider as App-wide - you're not affected by the remounts as Context/Provider mounts only once per whole app execution.

Please, can anybody put some light into this?

[cerealexx]

same here 😞

[alanaprianto]

is there any update for this issue? I'm facing same issue!

[gregamann]

Same for me...

[niteshsyngenta11]

I am facing the same issue. Do we have solution for this?

[gregamann]

I'm not sure if it can help someone, but I simply don't use React libraries to implement reCAPTCHA v3 anymore.

I import reCAPTCHA v3 via CDN in index.html:

<script src="https://www.google.com/recaptcha/api.js?render=%REACT_APP_GOOGLE_SITEKEY%"></script>

For those using TypeScript, I install the @types/grecaptcha package as a dev dependency.

Then, I use it as follows:

grecaptcha.ready(() => {
      grecaptcha
        .execute(process.env.REACT_APP_GOOGLE_SITEKEY, { action: 'my-action' })
        .then(captcha => {
          // do what you want with your captcha token
        })
    })

[Prooksius]

Hope this helps.
locate and remove this loaded recaptcha script while unloading wrapping component GoogleReCaptchaProvider. Like this:

const scriptSelector = 'script[src=\'https://www.google.com/recaptcha/api.js?render=' + recaptchaSiteKey + '\']';

const script = document.querySelector(scriptSelector);
  
if (script) {
  script.remove();
}

P.S. It appears that this code is already present in this package.. :-(

[jonfryd]

Still an issue...

[Rashmi9327]

Along with "sitekey" error getting one more error 🥹

Unhandled Promise Rejection: Cannot read properties of undefined (reading 'logging')

[noc2spam]

Getting the same error as well. Any update?

Edit:
Downgrading to 1.9.8 fixed it for now.

[Hareesh108]

@Hamin-Jeon Hello,

Try wrapping the GoogleReCaptchaProvider component in the parentmost app.jsx or app.tsx component.

like this in App.tsx

<GoogleReCaptchaProvider reCaptchaKey={SITE_KEY}>
      <YourComponents/>
</GoogleReCaptchaProvider>

I was getting also the same issue but after this config. it is resolved.

[jedimonkey]

Getting the same error as well. Any update?

Edit: Downgrading to 1.9.8 fixed it for now.

This also worked for me.

[micobg]

Still a valid issue.

[domus71]

@Hamin-Jeon Hello,

Try wrapping the GoogleReCaptchaProvider component in the parentmost app.jsx or app.tsx component.

like this in App.tsx

<GoogleReCaptchaProvider reCaptchaKey={SITE_KEY}>
      <YourComponents/>
</GoogleReCaptchaProvider>

I was getting also the same issue but after this config. it is resolved.

Great workaround!

[schimin]

Same issue to me, code as similar. Version 1.10.1
BUT Downgrading to 1.9.8 fixed it for now.

[RuntimeRacer]

@Hamin-Jeon Hello,

Try wrapping the GoogleReCaptchaProvider component in the parentmost app.jsx or app.tsx component.

like this in App.tsx

<GoogleReCaptchaProvider reCaptchaKey={SITE_KEY}>
      <YourComponents/>
</GoogleReCaptchaProvider>

I was getting also the same issue but after this config. it is resolved.

Thank you this fixed it for me. Using React 18.2.0

[WilliamPriorielloGarda]

I'm not sure if it can help someone, but I simply don't use React libraries to implement reCAPTCHA v3 anymore.

I import reCAPTCHA v3 via CDN in index.html:

<script src="https://www.google.com/recaptcha/api.js?render=%REACT_APP_GOOGLE_SITEKEY%"></script>

For those using TypeScript, I install the @types/grecaptcha package as a dev dependency.

Then, I use it as follows:

grecaptcha.ready(() => {
      grecaptcha
        .execute(process.env.REACT_APP_GOOGLE_SITEKEY, { action: 'my-action' })
        .then(captcha => {
          // do what you want with your captcha token
        })
    })

This is was the correct solution for us. Downgrading to 1.9.8 did not solve our problem. We were still unable to submit our forms twice.

This library was a good effort but it seems to no longer be maintained and it is not working correctly for us anymore.