react-google-recaptcha-v3: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading my site key)

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

About this issue

Original URL
State: open
Created a year ago
Reactions: 3
Comments: 23

Most upvoted comments

@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.

Hareesh108 on Jan 5, 2024

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

cotwitch on Aug 7, 2023

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

schimin on Feb 21, 2024

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

gregamann on Oct 11, 2023

Getting the same error as well. Any update?

Edit: Downgrading to 1.9.8 fixed it for now.

noc2spam on Dec 24, 2023

Along with “sitekey” error getting one more error 🥹

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

Rashmi9327 on Nov 6, 2023