Error recaptcha placeholder element must be an element or id

TOPIC:

reCAPTCHA placeholder element must be an element or id 2 years 8 months ago #240715

Until recently, the form still worked with invisible reCaptcha. Now you get the error «reCAPTCHA placeholder element must be an element or id» in dev-console. The error is also with classic reCaptcha or NewCaptcha.
What is the reason?

Inst. is BF-build 934.
Domain and form is on www.djwam.de/.

de-DE:
Bis vor kurzem funktionierte noch das Formular mit invisible reCaptcha. Nun erhalte in lt. dev-console den Fehler «reCAPTCHA placeholder element must be an element or id». Der Fehler ist auch bei klassischen reCaptcha oder beim NewCaptcha.
Woran liegt es?

Inst. ist BF-build 934.
Domain und Formular ist auf www.djwam.de/.

Please Log in or Create an account to join the conversation.

reCAPTCHA placeholder element must be an element or id 2 years 8 months ago #240730

I assume you are using Joomla 2.5.

There is a current bug with mootools and recaptcha (not an issue with BF) that affects J 2.5 and potentially J3, too.

Attached are the motools-core.js and mootool-more.js files that can potentially fix this issue until an official fix is available.

Please unzip the file and copy the 2 resulting files into

Please backup the original files before you do that.

Источник

reCAPTCHA placeholder element must be an element or id during Unit testing #41

I’m trying to figure this out. Ive seen a few posts about this on Github and SO, but none of the «fixes» have worked for my project. I know this seems to be from Google’s script, but Im trying to figure out why i dont see this when running the project and playing around the UI. Nothing shows in the browser console. But when i run unit tests, i see this error pop up, and it seems like each test run, the error pops up on a different component. Even components that dont have the recaptcha even anywhere in them.

The unit tests are just the default unit tests that come with a component when it is generated. Nothing added to them.

This may not be the correct place, but thought maybe someone knows what exactly to do when they run into this with this component. Thanks for any input!

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

What do you see if you log window[‘grecapcha’] in your tests? Google script registers itself to this global variable and it has to be available. If its not, it may be that the test cleared global variables or they are not accessible.

you could potentially fix this by adding recaptcha script directly to your index.thml page — or you could add the script to karma’s configuration so its aware of it.

Sorry. Posted from my other Github account on previous post

I get LOG: undefined when running tests. I have placed the script in index.html and karma.conf both and either or and still get same error and log message in all cases. :/

files: [
«https://www.google.com/recaptcha/api.js»
]
And in index.html, ive tried adding to head and to end of body with rest of JS files all with same result. Im using Angular 7 if that helps make any difference

Btw, I do wanna say, this is by far the easiest and best implementation of google recaptcha Ive been able to find for use with Angular. Thats why im desperately wanting to figure out this unit testing problem. 👏

Reverting to version ^4.7.0 was the only way I could get around the problem.

It took me a while to narrow it down to this package, but I was able to verify the issue occurs with ^5.0.0 and ^6.0.0. What happens is that random tests fail with a «Script error. thrown» both locally using «ng test» and on my CI server.

The odd thing was that sometimes all the tests would succeed! However, I was able to notice that every time my test would fail, the following error would get logged to the console:

recaptcha__en.js:512 Uncaught Error: reCAPTCHA placeholder element must be an element or id
at Object.$l [as render] (recaptcha__en.js:512)
at :9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:211
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:391)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone-testing.js:289)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:390)
at Zone../node_modules/zone.js/dist/zone.js.Zone.run (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:17248)
at ReCaptcha2Component.push../node_modules/ngx-captcha/fesm5/ngx-captcha.js.BaseReCaptchaComponent.renderReCaptcha (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:210)
at ReCaptcha2Component.push../node_modules/ngx-captcha/fesm5/ngx-captcha.js.BaseReCaptchaComponent.onloadCallback (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:290)
at ScriptService. (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:263)

Every time my tests succeeded, this error was NOT in the console output. It was ultimately the above console error that allowed me to narrow it down to this package. I was coming here to log an issue, when I noticed that this one was already created.
My package.json contents are:

I noticed that the usage of .forRoot stopped being available in version 5 and above.

Version 4

Version 5 & 6

The key is now to be specified on the component. I don’t know if that has anything to do with it, but as per this article the error was caused by the script being added multiple times.

This kind of seems like some racing condition which is why it sometimes passes and sometimes not. The problem with global variables and google’s script is that it can only be included once and when its initialized in the load callback (called when script is downloaded from CDN) it tries to setup the component. However, if the test already finishes and didn’t wait (because how could Angular know it is supposed to wait?) it will remove components from DOM and thus google cannot find the component in question.

One, quite naive, thing to do might be to wait certain amount of time (say you have a timeout for 5 secs) before quiting / executing the test so that everything has a change to initialize. Also, since the captcha is an external event, you might also need to use angular’s detectChanges function.

I know this is rather vague, but it kind of makes sense so maybe it will point you to the right direction.

@Enngage hmm. looks like that may have done the trick. I put this at the end of my beforeEach() in my tests that included the recaptcha and my unit tests have been passing since. 👍 Although it almost seems backwards since setTimeout should allow tests to execute before the detectChanges() actually runs. 🤷‍♂️

Ok. Makes sense. Thanks!
Any idea why version ^4.7.0 doesn’t have this issue?
BTW — Thanks for the plugin!

@Enngage I think we can close this issue as your suggestion helped fix the issue unless anyones else has a good reason not to. 👍

Awesome, I’ll include this information in readme as well because there have been quite a few issues with this. Thank you for the confirmation 🙂

Источник

Getting error when recaptcha is not rendered #68

I have a recaptcha in a div that’s hidden until I need the form. I’m using a *ngIf to show or not show the form. When the default state is shown, no problem. When the default state is hidden, instead, I get:

Admittedly, I’m not great at debugging JS, but I tried searching online for what may be an issue, and couldn’t find anything. I’m hoping you may be able to help me figure out where I may have gone wrong? Given nothing’s rendered yet, I’m confused why it’d be trying to place one?

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

I’m not sure exactly why this might be, but have you tried using [hidden] or setting the style of the div to display:none in the component.ts based on your variable you’re using in your *ngIf ? That’s what I would do

So I realized I can’t use hidden in my code without it causing other issues, but I’ve been trying to debug, and what I’m seeing is that even though the parent of the parent containing the ng-recaptcha component isn’t being rendered (via the *ngIf ), ngAfterViewInit is still firing, causing renderRecaptcha to fire, and failing, because there is no ng-recaptcha component in the view, and thus it never got the id to add the recaptcha to.

I’m not really all that experienced, but if the component isn’t yet in the view (thanks to something like *ngIf , shouldn’t ngAfterViewInit not fire?

Thank you for submitting this, @rohitsodhia , and for doing initial triaging! I’ve tried to reproduce this error in plunker (see here), but my attempt was unsuccessful. Could it be that there is something else in your scenario, that is different from this example?

Looking at that plunker vs what I have, I see it’s because I have code separated into modules. I noticed that in the readme, there is a link saying more information on modules later, though it doesn’t go anywhere. I created a quick repo reproducing the error in a clean environment. I’m hoping that it’s just a case of me not using your project correctly or perhaps something about Angular I don’t yet understand. Admittedly, I tried to download and debug the package myself to get into the open source community, but alas, tis not so.

@rohitsodhia sorry for not responding for a while. Were you able to resolve this issue?

No problem. And no, I wasn’t. After making the repo I linked above, I ended up working on a different feature and haven’t been back to this since.

I’m also seeing this error where I’m using component factory to create a component(works ok) then if I destroy that component, and make it again later(probably being reused?) I get the ReCAPTCHA placeholder element must be an element or id error. Its a bit cumbersome to reproduce in plunkr, but I’ll see if I can dig something up =)

Update: Most Likely unrelated my bug, and my own doing. It looks in my component factory, angular is creating the component before putting anything in the DOM, and since the element isn’t in the document, well, I get the error that it isn’t there.

After poking around for a bit, without brute forcing it(try catch then break when we actually render), not sure if there is a good way out in my scenario. Angular(4) appears to be rendering my DOM internally, and then appending it to the real DOM, which will never work. And I’m assuming you are stuck in a similar issue, where, with the subcomponent that way the modal renders the stuff and then hides it, then triggers the afterViewInit.

@rohitsodhia @brgaulin looks like this issue will be solved by #77 (tested in locally and with the example provided by @rohitsodhia ).

Источник

Forum

[Solved] reCaptcha Error: reCAPTCHA placeholder element must be an element or id

I have an error in reCAPTCHA, it display when the user is not logged.

reCaptcha Error: reCAPTCHA placeholder element must be an element or id

Please leave some example URL to allow us to check the issue.

In case you want to say thank you! 🙂
We’d really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Hello, I have also the same situation (same error for guest users), with Firefox, while with Chrome and Opera I have a (sometimes) different error message (like «greCaptcha is not a function).

If I put the slider (Google reCaptcha settings) to «easier for the users», the problem is exactly the same.

I don’t think I’m using any other Captcha plugin or thing.

The comment form works anyway, but that red error message is of course very bad because it appears even on the home page.

Once the «starting problems» will be fixed, I will surely leave a nice comment on WordPress because I love your plugin 🙂

I hope you can help.
Thanks 🙂

This may be a plugin conflict. It seems there is some other reCAPTCHA plugin. Please deactivate the plugins one by one and check after each deactivation to find a problem maker.

In case you want to say thank you! 🙂
We’d really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Hello, thanks a lot for your swift answer 🙂

I disabled one by one all the plugins which could have something to do with reCaptcha, but it did not help.

Then I clicked the button «Fix the database tables» in wpDiscuz, and also I disabled «display captcha on subscription form» (in fact, i don’t know what this subscription form is. ).

Then the problem was solved in all browsers.
Then I reactivated the button «subscription form» and the errors came back in pages with a login widget ( https://autistance.org/):

BUT there is an error on a page similar as above, except that there are no comments at all on that page ( https://autistance.org/kb/doc/autistan-org/s005000/s005340/s005340-cd-001/ ) :

In fact, I don’t even see any subscription bar. (I saw it yesterday, but not anymore).

So for now I will just deactivated that button

but even like this the problem is still present.

so. I don’t know what to do.

and now the crazy thing is that the error is still there if I disable the 3 buttons (and I always click the «save» button of course)

Now I clicked the «Reset tab options» button, which emptied all the fields, but the error is still there.

Another strange thing is that, no matter how many times I regenerate comments votes data and meta, it’s nver taken int account :

and now if I deactivate wpDiscuz completely, the error disappears.

(the «Join the conversation line is because of Replyable plugin)

Now I deactivate Replyable and reactivate wpDiscuz : the error did not come back 🙂

SO there is a problem of integration with Replyable.

Now I reactivate also wpDiscuz : the problem does not come back. Good.

I enable reCaptcha for guests, I put the two keys from Google,

and the problem is still absent 🙂

I dont dare to enale the «subscription» button.

I need to go to bed now (8am).

Let’s hope that these errors won’t come back.

Источник

reCAPTCHA placeholder element must be an element or id during Unit testing #41

Comments

vt-cwalker commented Feb 2, 2019 •

I’m trying to figure this out. Ive seen a few posts about this on Github and SO, but none of the «fixes» have worked for my project. I know this seems to be from Google’s script, but Im trying to figure out why i dont see this when running the project and playing around the UI. Nothing shows in the browser console. But when i run unit tests, i see this error pop up, and it seems like each test run, the error pops up on a different component. Even components that dont have the recaptcha even anywhere in them.

The unit tests are just the default unit tests that come with a component when it is generated. Nothing added to them.

This may not be the correct place, but thought maybe someone knows what exactly to do when they run into this with this component. Thanks for any input!

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

Enngage commented Feb 2, 2019

What do you see if you log window[‘grecapcha’] in your tests? Google script registers itself to this global variable and it has to be available. If its not, it may be that the test cleared global variables or they are not accessible.

you could potentially fix this by adding recaptcha script directly to your index.thml page — or you could add the script to karma’s configuration so its aware of it.

vt-cwalker commented Feb 2, 2019

Sorry. Posted from my other Github account on previous post

I get LOG: undefined when running tests. I have placed the script in index.html and karma.conf both and either or and still get same error and log message in all cases. :/

files: [
«https://www.google.com/recaptcha/api.js»
]
And in index.html, ive tried adding to head and to end of body with rest of JS files all with same result. Im using Angular 7 if that helps make any difference

vt-cwalker commented Feb 2, 2019

Btw, I do wanna say, this is by far the easiest and best implementation of google recaptcha Ive been able to find for use with Angular. Thats why im desperately wanting to figure out this unit testing problem. 👏

JakeLardinois commented Feb 7, 2019

Reverting to version ^4.7.0 was the only way I could get around the problem.

It took me a while to narrow it down to this package, but I was able to verify the issue occurs with ^5.0.0 and ^6.0.0. What happens is that random tests fail with a «Script error. thrown» both locally using «ng test» and on my CI server.

The odd thing was that sometimes all the tests would succeed! However, I was able to notice that every time my test would fail, the following error would get logged to the console:

recaptcha__en.js:512 Uncaught Error: reCAPTCHA placeholder element must be an element or id
at Object.$l [as render] (recaptcha__en.js:512)
at :9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:211
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:391)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone-testing.js:289)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:390)
at Zone../node_modules/zone.js/dist/zone.js.Zone.run (:9876/karma_webpack/webpack:/node_modules/zone.js/dist/zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:17248)
at ReCaptcha2Component.push../node_modules/ngx-captcha/fesm5/ngx-captcha.js.BaseReCaptchaComponent.renderReCaptcha (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:210)
at ReCaptcha2Component.push../node_modules/ngx-captcha/fesm5/ngx-captcha.js.BaseReCaptchaComponent.onloadCallback (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:290)
at ScriptService. (:9876/karma_webpack/webpack:/node_modules/ngx-captcha/fesm5/ngx-captcha.js:263)

Every time my tests succeeded, this error was NOT in the console output. It was ultimately the above console error that allowed me to narrow it down to this package. I was coming here to log an issue, when I noticed that this one was already created.
My package.json contents are:

JakeLardinois commented Feb 7, 2019

I noticed that the usage of .forRoot stopped being available in version 5 and above.

Version 4

Version 5 & 6

The key is now to be specified on the component. I don’t know if that has anything to do with it, but as per this article the error was caused by the script being added multiple times.

Enngage commented Feb 7, 2019

This kind of seems like some racing condition which is why it sometimes passes and sometimes not. The problem with global variables and google’s script is that it can only be included once and when its initialized in the load callback (called when script is downloaded from CDN) it tries to setup the component. However, if the test already finishes and didn’t wait (because how could Angular know it is supposed to wait?) it will remove components from DOM and thus google cannot find the component in question.

One, quite naive, thing to do might be to wait certain amount of time (say you have a timeout for 5 secs) before quiting / executing the test so that everything has a change to initialize. Also, since the captcha is an external event, you might also need to use angular’s detectChanges function.

I know this is rather vague, but it kind of makes sense so maybe it will point you to the right direction.

vt-cwalker commented Feb 8, 2019 •

@Enngage hmm. looks like that may have done the trick. I put this at the end of my beforeEach() in my tests that included the recaptcha and my unit tests have been passing since. 👍 Although it almost seems backwards since setTimeout should allow tests to execute before the detectChanges() actually runs. 🤷‍♂️

JakeLardinois commented Feb 8, 2019

Ok. Makes sense. Thanks!
Any idea why version ^4.7.0 doesn’t have this issue?
BTW — Thanks for the plugin!

vt-cwalker commented Feb 11, 2019

@Enngage I think we can close this issue as your suggestion helped fix the issue unless anyones else has a good reason not to. 👍

Enngage commented Feb 11, 2019

Awesome, I’ll include this information in readme as well because there have been quite a few issues with this. Thank you for the confirmation 🙂

JakeLardinois commented Feb 11, 2019

The above did not work for me; most likely because I use an async beforeEach. So what I did was to make the test asynchronous and then postpone it’s execution with a timeout function.

vt-cwalker commented Feb 11, 2019

I do want to point out, that it seems if you dont put a long enough timeout, it seems that it throws an error regarding calling detectChanges() out of scope or something (Im going off of memory as i write this since im not at my computer). So it seems that the more tests you are running, the longer the timeout probably needs to be would be my guess. :/ kind of a hack work around, but seems to do the trick at least

JakeLardinois commented Feb 11, 2019

Yeah, the error I got when using the setTimeout inside my async beforeEach was «ViewDestroyedError: Attempt to use a destroyed view: detectChanges thrown»

marcel-ploch commented Oct 14, 2019 •

best way for me to do this is Mock the Ngx-Captcha Component during Unit Test Time.

Maybe it is Possible to obtain a separate TestingComponent inside the Library which could be provided for testing.
BeforeEach Needs than the No_Error_Schema

kxying-kk commented Oct 9, 2021

@marcel-ploch can you please post how to Mock the Ngx-Captcha Component during Unit Test Time? when i created this mock component. it asks to add it in app.module. after i added it in app.module, it says selector: ‘ngx-recaptcha2’ is duplicate.

did you need to add this mock component in app.module?

marcel-ploch commented Oct 11, 2021

@marcel-ploch can you please post how to Mock the Ngx-Captcha Component during Unit Test Time? when i created this mock component. it asks to add it in app.module. after i added it in app.module, it says selector: ‘ngx-recaptcha2’ is duplicate.

did you need to add this mock component in app.module?

Just add the Mocked component in the configureTestingModule as declaration

Источник

Uncaught Error: ReCAPTCHA placeholder element must be empty #217

Comments

trungnguyencmu commented Apr 2, 2017

I got message on console: ‘Uncaught Error: ReCAPTCHA placeholder element must be empty’
Please help me fix it

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

grosser commented Apr 2, 2017

have not seen that before . can you reproduce with the demo app ?

trungnguyencmu commented Apr 3, 2017

My Controller:

I’m doing on localhost, so I can reproduce for you . Sorry @grosser

designcitypl commented Apr 12, 2017

@trungnguyencmu Are you using turbolinks in your app?

I had the same issue when page is cached by turbolinks and user is leaving this page (to another page, handled by turbolinks) and then returns to the first page/view, where form with ReCAPTCHA is placed and has been rendered already (at first visit).

Saidbek commented Apr 28, 2017

I have the same error +1

thaleshcv commented May 10, 2017

same error +1 (same scenario described by @designcitypl )

andyyou commented May 24, 2017

Here is problem example

I found out in rails 4 there is no problem, but in rails 5, if you visit page that has recaptcha first time, nothing happen, then you move to another page by click link and come back page error will show up

grosser commented May 24, 2017

any idea for a fix . PR ?

andyyou commented Jun 20, 2017 •

I am not familiar with Ruby here is an idea after I read source code

grosser commented Jun 20, 2017

can you turn that into a PR and link this here so the other users with the same issue can review ?

jvopelak commented Aug 8, 2017

dimanlin commented Sep 3, 2017 •

I’s hapend if i have two «recaptcha_tags» on the page.
Im loading the google recaptcha library twice.

grosser commented Sep 3, 2017

might also be able to set a @script_tag_already_renderd . and then don’t render it twice

farhad-tarapore commented Sep 11, 2017

Is there any solution for this? I’m using in ruby view file and I’m getting the same error

Rahul-Sagore commented Sep 11, 2017

When you use recapthca_tag , it loads script library by default every time it renders.
You have to pass: script => false to stop injecting of script again and again.
false %>

trungnguyencmu commented Sep 11, 2017

recaptcha load twice in my app, check carefully . 🗡

alexismansilla commented Dec 19, 2017

Recaptcha load twice in your app 🍟

damonbakker commented Jun 20, 2018 •

I got the same error but not because of having two tags on one page.

My issue was similar to what @designcitypl described. My pages are cached, so the placeholder wasn’t empty when the cached version was being shown.

I solved it by emptying the g-recaptcha element before the pages get cached by turbolinks.

Note that I am using jquery, you probably don’t have to for this.

Источник

Ошибка Recaptcha 2.0: элемент-заполнитель reCAPTCHA должен быть элементом или идентификатором

Я просмотрел все остальные сообщения, которые смог найти, и ни один из них не решил проблему для меня. У меня есть единственный вызов API ReCaptcha в заголовке документа:

А потом сразу после

И я получаю следующую ошибку в моей консоли:

Я пробовал изменить порядок. Я пытался добавить асинхронную отсрочку к моему вызову скрипта, но ничего не помогло.

Кроме того, очень странно, если я вручную вызываю grecaptcha.render, ошибка возникает снова, даже если я использую ее для идентификаторов, которые на 100% существуют на странице. По какой-то причине он вообще не будет отображаться ни в одном div.

Что вы ребята думаете?

Глядя на трассировку стека исключения, которое вы получаете, выясняется, что .render() метод, который фактически вызывается, принадлежит mootools:

Поскольку инструменты, которые вы используете, минимизированы, я не могу точно сказать, где именно что-то пойдет не так. Однако мне кажется, что в этом методе выполняется какая-то повторная привязка параметров, и, вероятно, это приводит к тому, что что-то еще назначается первому апреметру, когда каким-либо образом в конце концов вызывается метод reCaptcha.

Поэтому я попытался удалить mootools с вашей веб-страницы в локальной копии — и это действительно решило проблему, reCaptcha отлично работает без mootools.

Источник