Uncaught in promise error recaptcha has already been rendered in this element

Error: ReCAPTCHA has already been rendered in this element when rendering page for second time #55

If I render my page with the invisible captcha, everything works as expected. If leave the page (i.e. back-button) and come back to my page with the captcha, I get the error Error: ReCAPTCHA has already been rendered in this element .

I am trying to use the captcha.reset() function, but it doesn’t seem to be doing what I expect. I have tried the reset() in multiple react lifecycle locations (componentWillMount, componentWillUnmount, render), but I’m still seeing the error.

I’m rendering the invisible captcha using this code:

The text was updated successfully, but these errors were encountered:

The problem is that DOM generated by this.props.grecaptcha.render() is not removed during ‘s unmount and therefore can cause trouble when rendering a new instance at the same place.

I can see two possible solutions:

1. Implement componentWillUnmount to do following:
   • Remove all DOM generated by this.props.grecaptcha.render() including the render target element. (we don’t want to remove the div generated by React, so we probably want to manually add a wrapper div for this purpose)
   • Call grecaptcha.reset(widgetId) to do memory cleaning (as mentioned here and here)
2. Detach rendered DOM inside componentWillUnmount and save it into some global variable for later reuse. This prevents the component from slow reloading after each use, however different instances may need different rendering parameters so this has to be taken into account.

@jhrdina yeah I think the first approach makes more sense. Would you have time to do a PR for this? I don’t currently have a lot of bandwidth, but will be happy to review & release.

Источник

reCAPTCHA has already been rendered in this element. #7

I’m using two components (signup and login) with ngx-captcha in each of these components.

Now when I’m trying to navigate between these two components (from signup to login), I get this «reCAPTCHA has already been rendered in this element» error.

I tried everything I could in ngOnDestroy in order to reset and reload the captcha in each of the components. Still getting the same error.

Other than that, everything is working just fine. Wondering if I’m doing something wrong?

The text was updated successfully, but these errors were encountered:

I’ve made some changes to the code, can you try updating to 2.2.0 ? Let me know how that works.

There was a minor bug with captcha id, try using 2.2.1

You’re awesome man!
The error is gone now. But sure, there is another one! 🙂
reCAPTCHA couldn’t find user-provided function: ngx_onload_callback_SOME_RANDOM_NUMBER

I’m not sure how that could occur. I was able to add multiple instances of captcha to my demo page without any issue. Can you try forking this repo and reproducing in the Demo application? Just fork + npm i + ng serve

I just added a navigation that tries to mock auth and redirects a user to another page.

Now, try to go to invisible recaptcha page with your console open and you will see the error that I’m talking about.

Thanks for that! Ah, I see what you mean. Though I’m not sure this is something I can fix on my end. The console log you see is coming from google script which says that the callback method could not be found. The thing is that Angular’s ngOnChanges is called before ngOnInit and so if you include captcha elem on page it will register the google script along with the callback and if you redirect before the google script has a change to initialize, the component will already be destroyed.

Is this causing you any issues? If not, I would leave it as it is. If it is, then maybe consider using *ngIf along with some condition on the ngx-captcha components so they are not registered until they are really needed.

It’s not causing any issues. I just wanted to know if it is indeed, an issue and whether I’m doing something wrong :/ Thanks for your great explanation and your excellent efforts for this project in here 🙂

Источник

reCAPTCHA has already been rendered in this element. #7

I’m using two components (signup and login) with ngx-captcha in each of these components.

Now when I’m trying to navigate between these two components (from signup to login), I get this «reCAPTCHA has already been rendered in this element» error.

I tried everything I could in ngOnDestroy in order to reset and reload the captcha in each of the components. Still getting the same error.

Other than that, everything is working just fine. Wondering if I’m doing something wrong?

The text was updated successfully, but these errors were encountered:

I’ve made some changes to the code, can you try updating to 2.2.0 ? Let me know how that works.

There was a minor bug with captcha id, try using 2.2.1

You’re awesome man!
The error is gone now. But sure, there is another one! 🙂
reCAPTCHA couldn’t find user-provided function: ngx_onload_callback_SOME_RANDOM_NUMBER

I’m not sure how that could occur. I was able to add multiple instances of captcha to my demo page without any issue. Can you try forking this repo and reproducing in the Demo application? Just fork + npm i + ng serve

I just added a navigation that tries to mock auth and redirects a user to another page.

Now, try to go to invisible recaptcha page with your console open and you will see the error that I’m talking about.

Thanks for that! Ah, I see what you mean. Though I’m not sure this is something I can fix on my end. The console log you see is coming from google script which says that the callback method could not be found. The thing is that Angular’s ngOnChanges is called before ngOnInit and so if you include captcha elem on page it will register the google script along with the callback and if you redirect before the google script has a change to initialize, the component will already be destroyed.

Is this causing you any issues? If not, I would leave it as it is. If it is, then maybe consider using *ngIf along with some condition on the ngx-captcha components so they are not registered until they are really needed.

It’s not causing any issues. I just wanted to know if it is indeed, an issue and whether I’m doing something wrong :/ Thanks for your great explanation and your excellent efforts for this project in here 🙂

Источник

Ошибка с reCAPTCHA

Из-за этой ошибки могут не работать другие js файлы?

Все контактные формы не автозаполняются при выборе адреса кроме той что находится в футере

Ответы (1 шт):

Теперь когда ошибки в консоли устранены, можно взяться за разбор происходящего.

Открываем dev tools, смотрим Event Listeners на форме на работающем сайте

Видим, что есть ссылка на 186 строку http://viniry.kz/wp-content/themes/eurodent/js/scripts.js?ver=20151215 . Там находится код обработки. Если туда поставить точку останова в браузере, при клике сработает точка останова.

На неработающем сайте такого обработчика (среди Event Listeners) вообще нет — проверьте это сами.

Почему так? В коде обработчика на картинке выше видим:

Клик должен быть по элементу input с name=group внутри элемента с классом contactform-wrap. У вас такого класс на проблемном сайте нет. Сравниваем:

Добавьте класс к элементу, и всё будет работать.

Можно сделать вывод, что контент сайта переносился руками, и некоторые классы элементов Visual Composer были потеряны. И вот тут мы возвращаемся к самому первому моему вопросу — как делали перенос сайта? и убеждаемся, что с самого начала я вам не «мешался», и не «говорил не по теме», а указывал на первопричину ваших проблем.

Уверен, что из-за неправильного переноса у вас ещё не один косяк вскроется. Переносите сайты правильно, с использованием Duplicator, и вы избежите массы подобных проблем.

Источник

reCAPTCHA has already been rendered in this element about react-google-recaptcha-v3 HOT 3 OPEN

Having the same issue when trying to define container prop.

👉🏻 Can’t container.element be dynamic at all?

Otherwise, the prop doesn’t make sense since DOM is yet to be ready when the GoogleReCaptchaProvider is triggered.

blekmus commented on January 16, 2023

I’ve been using this in a Nextjs setup. This error occurs when I’m in development mode. When I build and serve the application, there’s no problem. The error is not given and the captcha widget attaches itself to the element.

StigoSvK commented on January 16, 2023

I have the very same issue. Error is happening because of Strict mode which should not be ignored. At the and I decided to not use recaptcha badge at all. See https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

• Iframe AODA compatibility
• executeRecaptcha not loaded
• ReferenceError: process is not defined HOT 2
• Don’t know what to do after sending token to backend and getting score from backend. HOT 2
• Property ‘container’ does not exist on type ‘IntrinsicAttributes & IGoogleReCaptchaProviderProps’. HOT 1
• recaptcha still return token even when offline HOT 1
• release changelog HOT 2
• Recaptcha causing page rerendering HOT 1
• Please create tags for the new releases published on npm 🙂 HOT 1
• [BUG] The commit «Fix issue with script reload on provider rerender with `scriptProps` present» introduces a regression on my product HOT 2
• Make Too much complex
• documentation for Example of refreshReCaptcha option
• Reduce package size
• How to access the vanilla `onload` function? HOT 1
• Default value for action parameter HOT 1
• Load script only on one page instead of all pages. HOT 2
• Prop to change theme without change the default element
• window[C[1]][C[0]] is undefined when navigating to the page with reCaptcha using nextJs router
• Question about steps after getting token HOT 2

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Источник

Подключаю скрипт гугл каптчи

<sc ript class="g-recaptcha-script" src="https://www.google.com/recaptcha/api.js onl oad=onloadCallbackGoogleRecaptcha&render=explicit" async defer></sc ript>

В шаблон формы вставляю html

<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized1"></div>
еще одна форма
<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized2"></div>

Таких форм несколько и гугл каптч будет тоже несколько

Теперь запускается функция: onloadCallbackGoogleRecaptcha

var allCapthaForms = new Array()
 var onloadCallbackGoogleRecapt cha = function() {
            var wss = document.getElementsByClassName('g-recaptcha-dynamic-initialized')
            Array.prototype.filter.call(wss, function(ws, i){
                id = ws.getAttribute('id')
                w=grecaptcha.render(id, {
                    'sitekey' : '<?=RE_SITE_KEY?>',
                })
                allCapthaForms.push(w)
            });
        };

Что она делает: инициализирует гугл каптчи и запоминает widget_id в массив allCapthaForms

Затем когда форма отправляется на сервер, через ajax, форма перезагружается и иницилазированная капча пропадает, ее нужно инициализировать заново, для этого написал это:

var resetAllCapthaForms=function () {
            allCapthaForms.forEach(function (item) {
                grecaptcha.reset(item)
            })
            onloadCallbackGoogleRecaptcha()
        }

здесь я пытаюсь перебрать массив allCapthaForms и сделать grecaptcha.reset(item) каждой капчти, а затем снова запустить рендеринг функцией onloadCallbackGoogleRecaptcha()

НО! Все работает если форма одна! Но если форм больше одной, то я получаю ошибку:

recaptcha__ru.js:596 Uncaught Error: reCAPTCHA has already been rendered in this element
at Object.$l [as render] (recaptcha__ru.js:596)
at (index):2393
at HTMLCollection.filter ()
at onloadCallbackGoogleRecaptcha ((index):2391)
at resetAllCapthaForms ((index):2403)
at :2:9
at Function.BX.evalGlobal (kernel_main_v1.js?1549274874311659:15)
at Function.BX.evalPack (kernel_main_v1.js?1549274874311659:15)
at parent.bxcompajaxframeonload ((index):98)
at kernel_main_v1.js?1549274874311659:23

Как я понимаю функция grecaptcha.reset(item) сбрасывает только первую форму. А остальные не хочет. На всех сайтах только и пишут про эту функцию а в качестве параметра ей передавать widget_id что я и делаю. Или что то все таки упускаю?