Search code examples
javascripthtmlformsdomrecaptcha

Recaptcha 2.0 error: reCAPTCHA placeholder element must be an element or id

I've looked at every other post I could find, and none of them resolved the issue for me. I have a single call to the ReCaptcha API in my document head:

<script src="https://www.google.com/recaptcha/api.js?hl=he-IL&onload=onloadCallback&render=explicit" type="text/javascript"></script>

And then immediately after

var onloadCallback = function() {
    grecaptcha.render("recaptcha2", {
        sitekey: "6LendPIUAAAAAGQqB_2tq8fpgdGfBnEQA3v-CB0g",
        theme: "light"
    });
};

And I get the following error in my console:

recaptcha__iw.js:60 Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
    at mv (recaptcha__iw.js:60)
    at Object.render (mootools-core.js:88)
    at onloadCallback (register:56)

This is my live page: https://www.tofesyashir.co.il/register

I've tried changing the order. I've tried adding async defer to my script call, but nothing has helped.

Also, very strangely, if I manually call grecaptcha.render, the error is triggered again, even though I use it on IDs that 100% exist in the page. For some reason it won't render on any div at all.

What do you guys think?

Solution

  • Looking at the stackm trace of the exception you're getting revelas, that the .render() method that actually gets called is from mootools:

    Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
    at mv (recaptcha__iw.js:60)
    at Object.render (mootools-core.js:88)
    at onloadCallback (register:56)

    Since the mootools you use is minified, I can't quite tell where exactly it goes wrong. However it looks to me as if some parameter re-binding is done in that method, and likely this causes something else to be assigned to the first apremeter when, in whatever way, in the end the reCaptcha method ends up getting called.

    So I tried removing mootools from your webpage in a local copy - and it does indeed solve the issue, reCaptcha works fine with mootools gone.

    There is also an open bug report for this: https://github.com/google/recaptcha/issues/376. A link provided there leads to a solution posted in a related buig: updating mootools manually seems to fix the issue.