reCAPTCHA has already been rendered in this element
Solution 1
I had the same problem a couple days ago with a dynamic login and creation form. The reason was that I was rendering twice at the same element.
The Google ReCaptcha Throws an exception notifying said problem.
My solution was use try{...}catch(event){...}
as wrapper for grecaptcha.render()
try{
grecaptcha.render('elementID', {
'sitekey' : 'key',
'badge' : 'att',
'size' : 'att',
'tabindex' : 0,
'callback' : function(token) {
//..
},
'expired-callback' : function() {
//...
},
'error-callback' : function() {
//...
},
'isolated' : false
});
}catch(error){/*possible duplicated instances*/}`
Solution 2
For those who are using React with Firebase and in case this error occurs, you just have to destroy the instance of Recaptcha on unmount of your component.
useEffect(() => {
const verifier = new firebase.auth.RecaptchaVerifier(element.current, {
size: "invisible",
});
if (!recaptcha) {
verifier.verify().then(() => setRecaptcha(verifier));
}
return () => {
verifier.clear()
}
});
Computer
Updated on July 09, 2022Comments
-
Computer almost 2 years
I have a simple contact form built with ASP .Net using the updatepanel. Everything works as expected but i see the error
recaptcha__en.js: Uncaught Error: reCAPTCHA has already been rendered in this element
in the console window
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script src="https://www.google.com/recaptcha/api.js?onload=pageLoad&render=explicit" async defer></script> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="g-recaptcha" data-sitekey="XXXX"></div> </ContentTemplate> </asp:UpdatePanel> <script language="javascript" type="text/javascript"> function pageLoad() { $('.g-recaptcha').each(function (index, obj) { grecaptcha.render(obj, { 'sitekey': 'XXXX' }); }); } </script>
I initially added
onload=pageLoad&render=explicit
as if the captcha was not checked and you clicked the button to send, the captcha disappeared. Addingonload=pageLoad&render=explicit
to the script line resolved this but now i get the above error.If i try and remove some elements then something else breaks i.e. captcha doesnt display or is not displayed on postback?
-
notElonMusk over 3 yearsThis makes sense. Could you provide the full page? Im interested in where you're getting recaptcha and setRecaptcha
-
Matheus Ribeiro almost 3 yearsdid not work for me, still fires the error
-
Adam Azad over 2 years@itshinkswhenitscold,
const [recaptcha, setRecaptcha] = useState()