Recaptcha control not loading on Sitecore 10.2

Question

Getting the following in the dev tools console and the recaptcha control is not rendering.

reCAPTCHA couldn't find user-provided function: loadReCaptchas

Recently upgraded from Sitecore 9.0.2 to 10.2. We upgraded the Sitecore Forms Extensions to version sc10.1-4.0.2. The ReCaptcha control will not load. On Content Management servers I am able to view the ReCaptcha image but the control itself will not load when viewing the form on a page. When debugging, the output from the Recaptcha.cshtml looks like the following:

<div id="fxb_fe2d6775-2160-428c-9065-8e3f7565b206_Fields_d4073a01-591d-4e0d-8d09-2dc6d78e83a4__CaptchaValue_wrapper"></div>
<input id="fxb_fe2d6775-2160-428c-9065-8e3f7565b206_Fields_d4073a01-591d-4e0d-8d09-2dc6d78e83a4__CaptchaValue" name="fxb.fe2d6775-2160-428c-9065-8e3f7565b206.Fields[d4073a01-591d-4e0d-8d09-2dc6d78e83a4].CaptchaValue" type="hidden" class="fxt-captcha" data-val-required="Please confirm you are not a robot." data-val="true" />
<span class="field-validation-valid" data-valmsg-for="fxb.fe2d6775-2160-428c-9065-8e3f7565b206.Fields[d4073a01-591d-4e0d-8d09-2dc6d78e83a4].CaptchaValue" data-valmsg-replace="true"></span>

<script type="text/javascript">
  var reCaptchaArray = reCaptchaArray || [];
  reCaptchaArray.push(
    function() {
      var _captchaInput = window.document.getElementById('fxb_fe2d6775-2160-428c-9065-8e3f7565b206_Fields_d4073a01-591d-4e0d-8d09-2dc6d78e83a4__CaptchaValue');
      window.grecaptcha.render('fxb_fe2d6775-2160-428c-9065-8e3f7565b206_Fields_d4073a01-591d-4e0d-8d09-2dc6d78e83a4__CaptchaValue_wrapper',
        {
          'sitekey': 'REMOVED-PROPERLY-ADDED',
          'callback': function(token) {
            _captchaInput.value = token;
          },
          'expired-callback': function(args) {
            _captchaInput.value = '';
          }
        });
    }
  );
</script>
  <script src="https://www.google.com/recaptcha/api.js?onload=loadReCaptchas&render=explicit&hl=en" async defer></script>

Any hints on what could be preventing the control from loading properly? screenshot of the message in Console:

Answer 1

The reason for this error is a missing callback function that should be called once the reCaptcha control is loaded. The function name is specified in the script tag:

<script src="https://www.google.com/recaptcha/api.js?onload=loadReCaptchas ...

In previous versions of Sitecore Forms Extensions the callback function was defined in the same ReCaptcha.cshtml file as the field HTML markup. Starting from version 9.2 this function exists in the file /sitecore%20modules/Web/ExperienceForms/scripts/formsextensions.validate.js and it looks like the browser can't find this function on your page.

Please check the following potential reasons:

• You should see that the JavaScript file /sitecore%20modules/Web/ExperienceForms/scripts/formsextensions.validate.js loads correctly in the Network tab of browser Developer Tools. If this file does not exist or the request blocked, it will trigger this error.
• If the JavaScript file is loaded correctly, make sure that it is not cached and contains the function loadReCaptchas. You can compare your file with the correct version in GitHub.
• If you do not see any request to formsextensions.validate.js and there is no such <script> tag in the raw HTML output of you page, check that the processor Feature.FormsExtensions.Fields.JavascriptLoader and the config Feature.FormsExtensions.Processors.config are included in your Sitecore configs folder. Your page layout file should also contain the helper @Html.RenderFormScripts() before the closing </body> tag to include the necessary scripts for forms.