Cannot access ‘Turnstile’ before initialization when using useTurnstile in Qwik

[Eucer]

Hi,

I am integrating Cloudflare Turnstile in my Qwik application using the useTurnstile hook. However, I encounter the following error when trying to render the Turnstile component:

Cannot access 'turnstile' before initialization

This error occurs in the following code snippet:

**export default component$(() => {
useStylesScoped$(styles);

// Turnstile hook
const { Turnstile, tokenSignal } = useTurnstile({
siteKey: import.meta.env.VITE_TURNSTILE_SITEKEY || '',
onTokenResponse$: $((token) => {
tokenSignal.value = token;
}),
});

return (

Human Verification

);
});**

Console:

17:45:10 [vite] Internal server error: Cannot access 'turnstile' before initialization File: /Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/src/routes/(Auth)/a/register/index.tsx:46:13 45 | }); 46 | 47 | export const head: DocumentHead = { | ^ 48 | title: "Crear cuenta", 49 | meta: [ at AsyncFunction.register_component_TnvOGK7rhVc [as resolved] (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/src/routes/(Auth)/a/register/index.tsx:46:13) at AsyncFunction.invokeApply (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3708:22) at AsyncFunction.invoke (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3701:22) at /Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:7359:21 at maybeThen (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:384:54) at /Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:7351:25 at /Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1018:25 at safeCall (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:373:21) at executeComponent (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1018:10) at renderSSRComponent (/Users/germys/Douvery/DOUVERY-RD/web/Douvery-RD-Web/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1379:20)