Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id

Question

I've found similar questions being asked here, but I've checked everything suggested and I couldn't find the issue. On the page https://www.basement-supercomputing.com/create-an-account/ I have the JavaScript error

Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id

This indicates that reCaptcha doesn't find the element to add itself onto the page as far as I understand. However, if I check the page source, I can see the HTML tag: https://monosnap.com/file/PeYWAw7wfSENan2At5VaGQ1ghErqhb

<div class="recaptcha controls">
    <div id="hika-recaptcha" class="hika-recaptcha"></div>
    <script type="text/javascript">
        var onloadCallbackHKRecaptcha = function() {
            window.hkCaptchaWidget = grecaptcha.render('hika-recaptcha', {'sitekey':'6LeexMISAAAAAIVTKhGZyvOmfc4s7Fqh-xo2a6t8', 'theme':'light'});

        };
        var scriptTag = document.createElement('script');
        scriptTag.src = "https://www.google.com/recaptcha/api.js?onload=onloadCallbackHKRecaptcha&render=explicit&hl=en-GB";
        scriptTag.defer = true;
        document.body.appendChild(scriptTag);
    </script>
</div>

I also read that such error could happen if there was several tags with the same id (that's not the case), or if recaptcha was loaded several times on the page (that's not the case either). It could also happen if the javascript is run before the tag is added on the page, but the tag is already there and even before the javascript of recaptcha on the page. I also checked with the same ReCaptcha code on localhost it works just fine: https://monosnap.com/file/2g0AgAWducwtjchIoC3Sf3uFxRuE3B Finally, note that in both cases, the website is made with the Joomla CMS.

I don't see any reason why it wouldn't work so if someone has an idea, that would be great ! Thanks in advance

Answer 1

Just ran across this issue myself. Looking at the stack trace, it appears that you are using moo tools (and so was I). It appears that if you remove it or update moo tools, it should resolve the recaptcha error. Thanks to another similiar post here: Recaptcha 2.0 error: reCAPTCHA placeholder element must be an element or id