[Google reCAPTCHA React] Uncaught Error: reCAPTCHA has already been rendered in this element
Question
recaptcha-react
Reactive icon
Forge component by Leandro Oliveira

I have problem with Google ReCAPTCHA asset Consumption in my Application, where it throws a console log error on click of the Hamburger Menu. Attached Screen shot for reference.

Tried placing Exception Handler in Many Enclosing Events In and Around the Widget Consumed.



Kindly Help in preventing this Console log error.

Solution

Hi Varada,

As you can see, the demo also uses LayoutTopMenu block and it doesn't raise exceptions on opening the hamburguer menu on phone view. This seems to be the way this screen is implemented, maybe its updating some client variables that feeds the recaptcha, I don't know. Sorry but I don't have time to join on a call, we need to figure it out other way, either replicate this bug in a personal environment and share the module or else I can not help. You just need to replicate the bare minimum widget tree structure of your application, not everything. If the bug doesn't happen on this scenario, then it should be something other than the recaptcha itself.

Regards,

Leandro Rodrigues

I'm sorry but this print doesn't help me at all. Attach the module and point out what screen/block that is causing the error.

Regards,

Leandro Rodrigues

I couldn't attach the Oml as it is a Enterprise Module. Making it more Clear,

 I have Used this Component in a Normal Layout Top menu Screen which Displays Hamburger Menu on Phone View.

On click of the Hamburger Menu some behind the Screen JS is triggering some change and initiating this error log from ReCAPTCHA block.

I will be available if you can spare time to join on a call and help me with this.

Thanks & Regards,
varada Rajan.

Solution

Hi Varada,

As you can see, the demo also uses LayoutTopMenu block and it doesn't raise exceptions on opening the hamburguer menu on phone view. This seems to be the way this screen is implemented, maybe its updating some client variables that feeds the recaptcha, I don't know. Sorry but I don't have time to join on a call, we need to figure it out other way, either replicate this bug in a personal environment and share the module or else I can not help. You just need to replicate the bare minimum widget tree structure of your application, not everything. If the bug doesn't happen on this scenario, then it should be something other than the recaptcha itself.

Regards,

Leandro Rodrigues

This seems to be more clear and sparky! Will try my best to resolve otherwise would replicate the issue and post the oml. 

Thanks much

Hello Varada Rajan,

You have to explain better your problem.

But did you saw the demo? There's nothing there that can help you?


Hi Leandro,

I'm facing the same issue and I understood why. When the ID is stored on client variable this happens. Apparently when we use this approach the captcha is rendered two times. Do you have idea why?


Thanks, Paulo Torres

Hi Paulo,

It seems that is something related to the render event while assigned client variables vs local variables. Can I ask why do you used this approach with client variables since the captcha is like a one screen usage? I mean, what is the point of having an captcha id of another's screen rendered/old captcha?

Regards,

Leandro

You are right Leandro... I solve this issue with LocalSession but after I noticed I have problems in another screen. I tried to put the Captcha in layout instead all screens I need but this doesn't work, so we have to put the captcha in all screens.

Thanks for your answer :)

Hi Leandro :)

It seems this problem happens every time you update some client variable, even if the variable is not used in Captcha. Do you have idea why?

Hello Paulo,

I've tested some scenarios but didn't found out why changing client variables do trigger the render of the captcha again while local variables don't.

Even though it throws an undesireable console error it doesn't impact the usage, since the captcha's id remain the same.

Still looking why this happens.

Regards!

It's quite strange in fact... For now I'm storing what I need in sessionStorage.

Thanks for your reply

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.