NuxtTurnstile component not loading Turnstile script as expected

[artifex-pro]

🐛 The bug

While using the NuxtTurnstile component from the nuxt turnstile package, it seems that the Turnstile script isn't loading as expected, throwing an Uncaught TypeError: Cannot read properties of undefined (reading 'render') error.

The problem is here according to the console.

script.mjs?v=be5efb17:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'render')
at Object.render (script.mjs?v=be5efb17:33:31)

line:

return window.turnstile.render(element, {

When loading in the cdn script through useHead and using onMounted to wait for when the script is available makes it work. But then the script is loaded 2 times. Resulting in a lot of other undesired behaviour.

useHead({
  script: [
    {
      async: true,
      src: 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit',
    },
  ],
});

onMounted(() => {
  // wait until cloudflare turnstile  is available
  const interval = setInterval(() => {
    if (window.turnstile) {
      clearInterval(interval);
      state.turnstile_loaded = true;
    }
  }, 100);
});

<NuxtTurnstile
  v-if="state.turnstile_loaded"
  v-model="turnstile"
  data-theme="dark"
  class="turnstile mt-2 mb-2"
/>

Maybe you can add in your code to wait for window.turnstile?

🛠️ To reproduce

.

🌈 Expected behaviour

That window.turnstile is available before use.

ℹ️ Additional context

No response

[dargmuesli]

Would you mind adding a reproduction using stackblitz? 🙏

[huang-julien]

quite strange but i've been able to reproduce it on the playground sometimes. I have a website deployed with nuxt turnstile but no issues for now.

[huang-julien]

useHead() doesn't seems to run in the plugin because it couldn't retrieve the head object using injectHead()

[dargmuesli]

Reopening, see #271 (comment)

[ajaythakkar]

I am also facing same issue, it is giving error on manual refresh but with router changes it is working fine

[ajaythakkar]

I have tried this and it works until this issue not getting resolved

<template v-if="isLoaded"> <NuxtTurnstile v-model="token" /> </template>

mounted() { setTimeout(() => { this.isLoaded=true; }, 500); },

[bayramorhan]

Using it on my nuxt 3 project. Works fine on SSR but if I navigate to the page that contains turnstile from another page via SPA then it fails. my solution is using <a href instead of <nuxt-link only for the pages that containing turnstile. that way you will never experience this issue on such cases.

[chris-si]

I'm facing the same issue, that the component is not loading when I completely reload the page (no SSR). But the solution from @ajaythakkar works so far as a workaround.
But I use it just on the Turnstile component which seems to be sufficient to get it working.

<NuxtTurnstile v-if="loadTurnstile" v-model="token" />
...
const loadTurnstile = ref(false);
onMounted(() => {
  setTimeout(() => {
    loadTurnstile.value = true;
  }, 500);
});

[vfrz]

I've just faced the same issue and resolved it this way (less random than waiting 500ms):

const pageReady: Ref<boolean> = ref(false);

onNuxtReady(() => {
  pageReady.value = true;
});

[dargmuesli]

@harlan-zw this sounds like a use case for @nuxt/scripts, no?

turnstile/src/runtime/plugins/script.ts

Line 97 in 8cfdd9f

const head = useHead({ script: script() })

cc @danielroe

[harlan-zw]

@harlan-zw this sounds like a use case for @nuxt/scripts, no?

turnstile/src/runtime/plugins/script.ts

Line 97 in 8cfdd9f

const head = useHead({ script: script() })

cc @danielroe

See #306

[dargmuesli]

Ahh, that's where I saw that! 🙈 confused it with another repo 😄 Great work 💪