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

[WuChenDi]

🐛 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

[moshetanzer]

UP. Just came to report this. since latest version

[WuChenDi]

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]

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

[dargmuesli]

@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]

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]

Thanks dargmuesli I will try it out now.

[onurgultekin]

dargmuesli it seems fixed. Thanks!

[arshx86]

Still goin on, @dargmuesli thanks for temporarily fix.

[dargmuesli-bot]

:tada: This issue has been resolved in version 0.9.11 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: