Log in to AnswerLog in to Follow
2022-05-19 14-01-44
Varada Rajan
46Views
11Comments
Solved
[Google reCAPTCHA React] Uncaught Error: reCAPTCHA has already been rendered in this element
Question
Forge
recaptcha-react
Reactive icon
Google reCAPTCHA React
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.

0
0
27 Apr 2022
Solution

Replying to Varada Rajan's comment on 28 Apr 2022 03:58:16

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

See solution in context
0
0
30 Apr 2022

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

0
0
27 Apr 2022

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.

0
0
28 Apr 2022
Solution

Replying to Varada Rajan's comment on 28 Apr 2022 03:58:16

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

0
0
30 Apr 2022

Replying to Leandro Oliveira's comment on 30 Apr 2022 10:39:23

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

0
0
30 Apr 2022

Hello Varada Rajan,

You have to explain better your problem.

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


2
0
27 Apr 2022

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

0
0
25 Jun

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

0
0
26 Jun

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

0
0
26 Jun

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?

0
0
10 Jul

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!

0
0
12 Jul

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

Thanks for your reply

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