Turnstile fails to load with explicit render

We are using turnstile with explicit render:

  window.turnstile.ready(() => {
    window.turnstile.render(container, {
      sitekey: '...',
      appearance: 'interaction-only'
      // ...
    });
  });

Although everything is set properly users keep getting this issue:

TurnstileError: [Cloudflare Turnstile] Remove async/defer from the Turnstile api.js script tag before using turnstile.ready()..

TurnstileError: [Cloudflare Turnstile] Remove async/defer from the Turnstile api.js script tag before using turnstile.ready()..

Tried multiple things none of which works.

Can you post your <script> tag that you’re using in your HTML to load the Turnstile script? The error is telling you that you’re using a defer or async attribute in there and need to remove it.

1 Like

@KianNH the script is in the , I tried both with render=explicit and onload=...:

    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>

@maxime.g any idea what could be casing this, it’s being triggered so many times in our logs

What @KianNH said above is correct

@hamza5 this error is displayed because the <script> tag used to load Turnstile had the async or defer attribute.

(For the record, the reasoning behind this is: if you want to use turnstile.ready(...), the Turnstile script needs to be loaded before this call happens - or the page will break.)

I am not aware of any known bugs in this logic. Please double check this in the source as seen by your visitors (which may differ from what you have in your dev mode, maybe?). Do you maybe have two places embedding a <script>, and one of them has the attributes? etc

1 Like

@maxime.g I checked multiple times but nothing, and I am 100% sure no browser would be adding async/defer to the scripts automagically. This is how I load the script:

  • Script is loaded in one place in the
  • Before calling turnstile I check if window.turnstile exists
  • before calling render I check .ready first → which fires the error for a lot of users

This is done in a sub react component so the script should have already been loaded by the time I am interacting with it.

Okay, this seems to fix it:

try {
  window.turnstile?.ready(() => {
    renderTurnstile();
  });
} catch {
  try {
    renderTurnstile();
  } catch (err) {
    // Handle error
  }
}

Somehow turnstile throws when calling ready function even if the script has already loaded.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.