1.1.13 -> 1.1.14 or 1.1.15 Turnstile failing to load

I am debugging at the moment to try and be useful. There are no console errors. However here are some observations:

Locally it does load fine.
On production it does not.
Markup wise I can see

<div class="cf-turnstile" data-sitekey="################" data-theme="light" data-size="normal" data-language="auto" data-retry="auto" interval="8000" data-appearance="always"></div>

but on version 1.1.13 the markup is:

<div class="cf-turnstile" data-sitekey="################" data-theme="light" data-size="normal" data-language="auto" data-retry="auto" interval="8000" data-appearance="always"><div><input type="hidden" name="cf-turnstile-response" id="cf-chl-widget-b5dkd_response" value="TOKEN"></div></div>

So it seems this actually fixes the issue:

1. Run This in Browser Console to Force a Reset

document.querySelectorAll('.cf-turnstile').forEach(el => {
turnstile.remove(el);
});
turnstile.render('.cf-turnstile', { sitekey: "######" });

2. Modify the Form Rendering Code to Prevent Duplicate Initialization

To avoid this problem, modify your Drupal form rendering:

$form['turnstile_widget'] = [
  '#markup' => '<div id="turnstile-container" class="cf-turnstile" data-sitekey="' . turnstile_site_key() . '"></div>',
];

$form['#attached']['drupalSettings']['turnstile'] = [
  'callback' => 'turnstileSuccess',
  'errorCallback' => 'turnstileError',
];

$form['#attached']['library'][] = 'turnstile/turnstile';

Then add this script in turnstile.ajax.js to remove any existing Turnstile instances before rendering a new one:

document.addEventListener("DOMContentLoaded", function () {
  const turnstileContainer = document.querySelector('.cf-turnstile');
  if (turnstileContainer) {
    turnstile.remove(turnstileContainer);
    turnstile.render(turnstileContainer, {
      sitekey: drupalSettings.turnstile.sitekey
    });
  }
});

@greatmatter thanks so much for being so responsive. I just deployed with your new hotfix and sadly I get the same results, fails to load/initialize.

As soon as I run this in the console on production it loads:
turnstile.render('.cf-turnstile', { sitekey: "#################" });

No luck on my end We have cleared caches Drupal, Varnish, Cloudflare, etc. The only fix is this:

turnstile.render('.cf-turnstile', { sitekey: "#################" });

With the current version or revert to 1.1.13.

I wish I could have good news and it be that simple but it is not.

This seems to work:

/**
 * @file
 * JavaScript behaviors for Turnstile.
 */
(function (Drupal, once) {
  'use strict';

  /**
   * Ensures Turnstile renders correctly on page load & AJAX events.
   */
  Drupal.behaviors.turnstileAutoRender = {
    attach: function (context) {
      once('turnstile-init', '.cf-turnstile', context).forEach((el) => {
        turnstile.render(el);
      });
    }
  };

})(Drupal, once);

Only 1, nothing fancy going on here. These are just basic webforms and GIn Login pages.

Okay well all our sites are behind Cloudflare and as soon as we disable RocketLoader it works. But we have always used this service. Since the change this is now conflicting it seems.

@greatmatter you are referring to the services file right?

parameters:
  session.storage.options:
    cookie_samesite: Lax

We already have this set on our sites, so we can rule that one out.

I can confirm that updating the widget does resolve the issue

/**
 * Build the Turnstile captcha form.
 *
 * @return mixed
 *   The return value.
 */
public function getWidget($validation_function) {
  // Add Turnstile script with async and defer attributes.
  $widget['form']['#attached']['html_head'][] = [
    [
      '#tag' => 'script',
      '#attributes' => [
        'src' => 'https://challenges.cloudflare.com/turnstile/v0/api.js',
        'async' => 'async',
        'defer' => 'defer',
      ],
    ],
    'turnstile_api',
  ];

  // Captcha requires TRUE to be returned in solution.
  $widget['solution'] = TRUE;
  $widget['captcha_validate'] = $validation_function;
  $widget['form']['captcha_response'] = [
    '#type' => 'hidden',
    '#value' => self::EMPTY_CAPTCHA_RESPONSE,
  ];

  // Allows the CAPTCHA to be displayed on cached pages.
  $widget['cacheable'] = TRUE;

  // Ensure the widget is properly rendered.
  $widget['form']['turnstile_widget'] = [
    '#markup' => '<div' . $this->getAttributesString() . '></div>',
  ];
  
  return $widget;
}

Yes this suggestion resolves the issue and it much better that what I suggested:

/**
 * Implements hook_library_info_build().
 */
function turnstile_library_info_build() {
  $config = \Drupal::config('turnstile.settings');
  $turnstile_src = $config->get('turnstile_src');

  $libraries = [];

  $libraries['turnstile.remote'] = [
    'js' => [
      $turnstile_src => [
        'type' => 'external',
        'attributes' => [
          'defer' => TRUE,
          'async' => TRUE,
        ],
      ],
    ],
  ];

  return $libraries;
}

Adding the defer and async allows everything to get along and Rocketloader can be reinstated. Win, win.

Rockstar thank you so much for pushing this fix.