Recaptcha Cannot read properties of undefined errors

[MikhailR1337]

• Browser - google chrome
• "react": "^18.2.0",
• react-recaptcha-that-works: "^2.0.1",
• Did the problem happen after updating the library? - No
• Are you using the library for the first time? - yes
• It's a bug? - I have an error: TypeError: Cannot read properties of undefined (reading 'clients') (the first screenshot) after successfully solving Recaptcha I call nextjs router method.push -> router.push(url, undefined, { shallow: true }) and got it.

Investigated source code I found a solution -> unmount before using router.push -> but if I after that I try to come back to prev page I have another error TypeError: Cannot read properties of undefined (reading 'badge') (the second screenshot)

How can I overcome it?

[douglasjunior]

This file in stack trace recaptcha_en.js is not from the react-recaptcha-that-works itself. Seems to be a file from inside reCAPTCHA SDK.

I never see these type of errors before, here we use the component in pages that are mounted and unmounted by react-router with no problems.

[MikhailR1337]

@douglasjunior Thank you, it really looks like the problem has to do with GoogleReCaptchaProvider from 'react-google-recaptcha-v3'

[douglasjunior]

Oh, I have never used recaptcha v3 before, so I can't make sure that it will work with the library.