nuxt-modules
TurnstileError: [Cloudflare Turnstile] Invalid type for parameter "container", expected "string" or an implementation of "HTMLElement".
đ 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".
đ ī¸ To reproduce
https://github.com/cdLab996/turnstile-examples-nuxt
đ Expected behaviour
It is anticipated to be displayed correctly across multiple pages.
âšī¸ Additional context
No response
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
Is there any update about this? We're facing the same issue on our project.
@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.
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.
:tada: This issue has been resolved in version 0.9.11 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
