appleboy/react-recaptcha

ReCAPTCHA placeholder element must be an element or id

daywong1119 opened this issue · 6 comments

daywong1119 commented

I got the error when inflating the view by code below:

     <div className="form-group" id="captcha-holder">
        <Recaptcha sitekey="xxx" render="explicit" verifyCallback={this.onCaptchaVerify}/>
    </div>

recaptcha__en.js:286 Uncaught Error: ReCAPTCHA placeholder element must be an element or id
MrHash commented

Several people have this problem it seems. Any advice?

  • 👍1
marudhupandiyang commented

Try adding onloadCallback to Recaptcha. Something similar to below

<div className="form-group" id="captcha-holder">
    <Recaptcha sitekey="xxx" render="explicit" verifyCallback={this.onCaptchaVerify} onloadCallback={this.onloadCallback}/>
</div>
  • 👍3
wil93 commented

I solved it by adding render="explicit" and onloadCallback={console.log.bind(this, "recaptcha loaded")}

I don't know why those two things (especially the onload thing) are required, but this check may be the cause of them being required:

react-recaptcha/src/index.js

Line 105 in 53768e2

if (this.props.render === 'explicit' && this.props.onloadCallback) {

  • 👍8
  • 🎉1
  • ❤️1
  • 🚀1
Daniel1971 commented

Thanks a lot, wil93.

chris-allnutt commented

#186 doesn't fix this issue. The issue doesn't present itself on hard reloads, only soft reloads when the data is already cached.

Currently using v2.3.5

JZebra commented

I'm also having this issue in v2.3.11, but only in certain parts of my app.