Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple reCAPTCHA components using custom provider error

See original GitHub issue

I was able to create the custom provider to load the reCAPTCHA widget and allow for changing of the language. With two widgets on one page I get an error when loading:

The root looks to be that api.js is loaded multiple times.

Uncaught Error: ReCAPTCHA placeholder element must be empty
    at Object.Vp [as render] (recaptcha__en.js:384)
    at RecaptchaComponent.renderRecaptcha (recaptcha.component.js:69)
    at SafeSubscriber._next (recaptcha.component.js:18)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at BehaviorSubject.Subject.next (Subject.js:55)
    at BehaviorSubject.next (BehaviorSubject.js:44)
    at window.ng2recaptchaloaded (locale-recaptcha-provider.ts:39)

After submitting and navigating away from the page,

ERROR Error: Uncaught (in promise): Error: Invalid ReCAPTCHA client id: 0
Error: Invalid ReCAPTCHA client id: 0
    at Object.Xp [as reset] (recaptcha__en.js:386)
    at recaptcha.component.js:63
    at ZoneDelegate.invoke (zone.js:381)
    at Zone.run (zone.js:141)
    at NgZone.runOutsideAngular (core.es5.js:4019)
    at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
    at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
    at callProviderLifecycles (core.es5.js:11145)
    at callElementProvidersLifecycles (core.es5.js:11114)
    at callLifecycleHooksChildrenFirst (core.es5.js:11098)
    at Object.Xp [as reset] (recaptcha__en.js:386)
    at recaptcha.component.js:63
    at ZoneDelegate.invoke (zone.js:381)
    at Zone.run (zone.js:141)
    at NgZone.runOutsideAngular (core.es5.js:4019)
    at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
    at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
    at callProviderLifecycles (core.es5.js:11145)
    at callElementProvidersLifecycles (core.es5.js:11114)
    at callLifecycleHooksChildrenFirst (core.es5.js:11098)
    at resolvePromise (zone.js:757)
    at resolvePromise (zone.js:728)
    at zone.js:805
    at ZoneDelegate.invokeTask (zone.js:414)
    at Object.onInvokeTask (core.es5.js:4119)
    at ZoneDelegate.invokeTask (zone.js:413)
    at Zone.runTask (zone.js:181)
    at drainMicroTaskQueue (zone.js:574)
    at HTMLFormElement.ZoneTask.invoke (zone.js:480)

Issue Analytics

State:
Created 6 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

DethArielcommented, Nov 21, 2017

Hey, @cassianomon ! Thx for your comment! Could you please open a separate issue and follow its template so that I can assist you further? A repro plunker would be great, btw 😃

0reactions

bazzmokecommented, Nov 21, 2017

Hey @DethAriel I just installed ng-recaptcha and I am having the same issue, I use one <re-captcha> for my recover-password component and another for the change-password component.

On my SharedModule I import as:

import { RecaptchaLoaderService, RecaptchaModule, } from 'ng-recaptcha'; imports: [RecaptchaModule], providers: [RecaptchaLoaderService] The recaptcha shows when navigating, but if I reaload I have the same issue as @mattfirtion.

Top Results From Across the Web

Frequently Asked Questions | reCAPTCHA - Google Developers

Recently my reCAPTCHA widget started displaying "Invalid site key". What's happening? If you are seeing this error, your reCAPTCHA site key is no...

Configuring Multi-factor authentication | reCAPTCHA Enterprise

This page describes how to configure Multi-factor authentication (MFA) that lets you verify your users' identity by sending a verification code by email...

trying to add recaptcha. Error => No value accessor for form ...

The error No value accessor for form control with name: 'captcha' . This can be resolved by adding the directive/control to list of...

How to implement reCAPTCHA in a React application

To verify a user's input with reCAPTCHA we require a server ... The Reaptcha component provides several props that can be used to...

reCAPTCHA in custom forms - Hyvä Docs

Using reCaptcha for custom forms · 1. Declare the recaptcha_validation child block · 2. Render the reCAPTCHA hidden field · 3. Add client...