reCaptcha not loading, Js Error

Created on 4 April 2024, 9 months ago
Updated 6 May 2024, 8 months ago

Problem

reCaptcha not loading due js failing. Is this due to browser failing to load js ? Can it be resolved? As its happening frequently to some customer.

πŸ’¬ Support request
Status

Fixed

Version

1.7

Component

Code

Created by

πŸ‡³πŸ‡΅Nepal lalustine

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lalustine
  • πŸ‡ΊπŸ‡¦Ukraine dench0

    Do you have any other errors in the console?
    Please show what recaptcha resources are loaded like on the attached screenshot.

  • πŸ‡ΊπŸ‡¦Ukraine pablo_pukha

    I found similar issues: Link, link

  • πŸ‡ΊπŸ‡¦Ukraine dench0

    Hey @pablo_pukha,
    great find, thanks.

    @lalustine
    you need to check custom scripts for something like self = this; and replace it with var self = this;.

  • πŸ‡³πŸ‡΅Nepal lalustine

    Hi @dench0 & @Pablo_Pukha, thanks for your great help but since i am using drupal module recaptcha v3 module, i dont see any js inside module. I could find only recaptcha_v3.js with below codes

    /**
     * @file
     * Recaptcha v3 behaviors.
     */
     
    (($, Drupal) => {
      function updateTokenElement(element) {
        let timer;
        // Wait for grecaptcha to be loaded.
        if (typeof grecaptcha === 'undefined') {
          timer = setInterval(() => {
            if (typeof grecaptcha !== 'undefined' || !element) {
              clearInterval(timer);
     
              if (element) {
                doUpdateTokenElement(element);
              }
            }
          }, 500);
        }
        else {
          doUpdateTokenElement(element);
        }
      }
     
      function doUpdateTokenElement(element) {
        let $element = $(element);
     
        grecaptcha.ready(() => {
          if (!element) {
            return;
          }
     
          grecaptcha.execute($element.data('recaptchaV3SiteKey'), {
            action: $element.data('recaptchaV3Action')
          }).then((token) => {
            $element.val(token);
            $element.trigger('change');
          });
        });
      }
     
      /**
       * Attach recaptcha response token from google with form.
       *
       * @type {{attach: Drupal.behaviors.reCaptchaV3.attach}}
       */
      Drupal.behaviors.reCaptchaV3 = {
        attach: (context) => {
          once('recaptcha-v3-token', '.recaptcha-v3-token', context).forEach(
            (element) => {
              let interval;
     
              updateTokenElement(element);
     
              // Update the recaptcha tokens every 90 seconds.
              // This seems to be the most robust way to always have valid recaptcha
              // tokens when you don't have control over how the forms are being
              // submitted. For example normal form submits are synchronous while
              // Google Recaptcha v3 is asynchonous.
              // A recaptcha token has a maximum lifetime of 120 seconds.
              // https://developers.google.com/recaptcha/docs/v3
              interval = setInterval(() => {
                if (!element) {
                  clearInterval(interval);
                } else {
                  updateTokenElement(element);
                }
              }, 90000);
            }
          );
        }
      };
    })(jQuery, Drupal);
     
    
  • Status changed to Fixed 8 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024