VM34 recaptcha__en.js:414 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'badge')

[igops]

Preface: I'm using both reCAPTCHA V3 and V2 versions in the same app, is it legal? 🤔

I'm getting quite weird error while navigating between the pages. Explicit render gives me the same result.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'badge')
    at VM34 recaptcha__en.js:414:153
    at r._renderRecaptcha (index.tsx:137:1)
    at index.tsx:216:1
    at new Promise (<anonymous>)
    at r.renderExplicitly (index.tsx:209:1)
    at p.<anonymous> (index.tsx:125:1)
    at callCallback (react-dom.development.js:13923:1)
    at commitUpdateQueue (react-dom.development.js:13944:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23364:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)

A workaround for me is to make React Router to reload the page, then error disappears.

That's how I render it so far: https://github.com/igops/tutorials/blob/main/njs-recaptcha-react/src/components/PhotoUnlockerRCv2.jsx#L41

P.S. I'm not an expert in React, so please don't be too harsh.

[igops]

After a small investigation I found out that loading reCAPTCHA V3 along with V2 breaks the latter.

A script loaded for V2: https://recaptcha.net/recaptcha/api.js?render=explicit
A script loaded for V3: https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxx

When both loaded, V2 doesn't work anymore.

My tentative conclusion: do not use both version in the same app.

[Jakub Sarnowski]

Hey @igops! Sorry for a late reply and thank you for your investigation!

I think we could do something like a cleanup on unmounting the Reaptcha component which would allow to have a clean state on any other route, whatever version is used there. I will try to take a look at it this week, but not promising as I'm not a full-time open sourcerer 😅

[igops]

@sarneeh hi Jacob, thank you for your response.

I'm not a front-end engineer, but I suspect this issue is probably out of scope of Reaptcha. Literally, Google scripts conflict with one another under the hood. To be honest, it's hard to imagine a real world case when both CAPTCHA versions are required in the same app (excepting the academic ones like mine 😄).

Nevertheless, I would appreciate any advise or contribution from your side! Thank you in advance!