Skip to content

Turnstile Widget seem to have crashed: 30se3 #347

@serhii-chernenko

Description

@serhii-chernenko

🐛 The bug

My issue is pretty close to the mentioned one.
I upgraded to beta to test the changes. But they don't solve the current issue.

VM25358 api.js:1 Uncaught TurnstileError: [Cloudflare Turnstile] Error: 300030.
    at g (VM25358 api.js:1:10466)
    at Object.C [as msgHandler] (VM25358 api.js:1:35952)
    at Ur (VM25358 api.js:1:17956)
    at VM25358 api.js:1:18354

This error appears when I have 2 pages with forms where I have the turnstile widget. And when I change route, I have the error every ~2 sec.
I tried to play with v-if and watch implemented language changes with the i18n module but it didn't help me

<NuxtTurnstile
    v-if="isVisible"
    ref="widget"
    v-model="token"
    :options="{
        action: 'vue',
        language,
        size: 'flexible',
    }"
/>
const { locale } = useI18n()

const token = defineModel<string>({
    type: String,
    default: '',
})

const widget = ref()

const isVisible = shallowRef<boolean>(false)

const language = computed<string>(() => {
    const localeValue = toValue(locale)

    return localeValue === 'ua' ? 'uk' : localeValue
})

watch(
    () => locale,
    () => {
        widget.value?.reset()
        isVisible.value = true
    },
    {
        flush: 'post',
    })

onMounted(() => {
    isVisible.value = true
})

onUnmounted(() => {
    isVisible.value = false
})

🛠️ To reproduce

🌈 Expected behaviour

The mentioned error is gone

ℹ️ Additional context

I wrapped the component with a custom one to simplify reusing. I tried to add .client to the name or wrap in ClientOnly / KeepAlive but it didn't help me as well

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions