search

nuxt-modules / turnstile

đŸ”Ĩ Cloudflare Turnstile integration for Nuxt
https://cloudflare.com/products/turnstile
MIT License
234 stars 17 forks source link

TurnstileError: [Cloudflare Turnstile] Invalid type for parameter "container", expected "string" or an implementation of "HTMLElement". #342

Open WuChenDi opened 3 weeks ago

WuChenDi commented 3 weeks ago

🐛 The bug

Hello everyone, I apologize for the interruption.

I have a question: I encountered no issues using Turnstile in my frontend project.

However, when I use it on another page, I experience the following error during page transitions.

For instance, when both app/pages/login.vue and app/pages/signup.vue utilize the NuxtTurnstile component, the subsequent error arises. In the development environment, the page appears blank, while in the deployed version, the page displays correctly but fails to show the verification widget.

VM113320 api.js:1 Uncaught (in promise) TurnstileError: [Cloudflare Turnstile] Invalid type for parameter "container", expected "string" or an implementation of "HTMLElement".

image

🛠ī¸ To reproduce

https://github.com/cdLab996/turnstile-examples-nuxt

🌈 Expected behaviour

It is anticipated to be displayed correctly across multiple pages.

image

ℹī¸ Additional context

No response

moshetanzer commented 3 weeks ago

UP. Just came to report this. since latest version

WuChenDi commented 3 weeks ago

This is my current approach.

However, I am aware that it is not the most effective method.

https://github.com/cdLab996/turnstile-examples-nuxt/commit/1aac4e17cb143ac723c3616566a838a83c11fbdf

onurgultekin commented 1 week ago

Is there any update about this? We're facing the same issue on our project.

dargmuesli commented 1 week ago

@danielroe it appears that just using onLoaded leads to this issue. On route change onLoaded seems to called before the element to mount into is available (as it's not mounted?). Does that sound plausible to you or should onLoaded not be the issue?

Edit: ah, I think onLoaded is called again because remove is called on unmount. I guess it makes sense to remove on unmount? So then I'd say onMounted would need to be used again.

dargmuesli commented 1 week ago

I've created PR https://github.com/nuxt-modules/turnstile/pull/344 for now until it is determined what the proper solution should look like (maybe it already is the proper solution). You should be able to install v0.9.11-beta.1 to check this fix.

onurgultekin commented 1 week ago

Thanks dargmuesli I will try it out now.

onurgultekin commented 1 week ago

dargmuesli it seems fixed. Thanks!