Open artifex-pro opened 1 year ago
Would you mind adding a reproduction using stackblitz? :pray:
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.
useHead()
doesn't seems to run in the plugin because it couldn't retrieve the head object using injectHead()
I am also facing same issue, it is giving error on manual refresh but with router changes it is working fine
I have tried this and it works until this issue not getting resolved
`
`
mounted() { setTimeout(() => { this.isLoaded=true; }, 500); },
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.
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);
});
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;
});
@harlan-zw this sounds like a use case for @nuxt/scripts
, no?
cc @danielroe
@harlan-zw this sounds like a use case for
@nuxt/scripts
, no?cc @danielroe
Ahh, that's where I saw that! :see_no_evil: confused it with another repo :smile: Great work :muscle:
The scripts integration was released just now. Would you please try out version 0.9.0
of this module by installing it, adding the @nuxt/scripts
module to your project and seeing if this resolves the issue?
@artifex-pro @ajaythakkar @bayramorhan @chris-si @vfrz
đ 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.
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