Nuxt•2mo ago

Auto imported functions show type error in <template>

Hi there! I've stumbled upon a weird issue where some of the auto imported functions are showing type errors in the <template> tag. For example, the function withModifiers() from vue works correctly in the <script> tag, however, when I use it in the <template>, vue-tsc says that Property 'withModifiers' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>... I am using the i18n module and when I remove it from nuxt config, the issue goes away. I was able to reduce my project to the following: package.json

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "devDependencies": {
        "@nuxt/devtools": "latest",
        "@nuxtjs/i18n": "^8.3.0",
        "@types/node": "^22.1.0",
        "typescript": "^5.3.3",
        "vue-tsc": "^2.0.29"
    },
    "dependencies": {
        "nuxt": "^3.12.4",
        "vue": "latest"
    },
    "engines": {
        "node": "20.9"
    },
    "packageManager": "pnpm@9.0.4"
}

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "devDependencies": {
        "@nuxt/devtools": "latest",
        "@nuxtjs/i18n": "^8.3.0",
        "@types/node": "^22.1.0",
        "typescript": "^5.3.3",
        "vue-tsc": "^2.0.29"
    },
    "dependencies": {
        "nuxt": "^3.12.4",
        "vue": "latest"
    },
    "engines": {
        "node": "20.9"
    },
    "packageManager": "pnpm@9.0.4"
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-04-03',

    typescript: {
        strict: true,
        typeCheck: true,
    },

    modules: [
        '@nuxt/devtools',
        '@nuxtjs/i18n',
    ],

    devtools: {
        enabled: true,
        timeline: {
            enabled: true,
        },
    },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-04-03',

    typescript: {
        strict: true,
        typeCheck: true,
    },

    modules: [
        '@nuxt/devtools',
        '@nuxtjs/i18n',
    ],

    devtools: {
        enabled: true,
        timeline: {
            enabled: true,
        },
    },
})

app.vue

<template>
    <div>
        <NuxtRouteAnnouncer />

        <button
            type="button"
            v-on="{
                click: withModifiers(() => null, ['prevent'])
            }"
        />
    </div>
</template>

<script lang="ts" setup>
import type { FunctionalComponent } from 'vue'

const CustomButton: FunctionalComponent = () => {
    return h('button', {
        onClick: withModifiers(() => null, ['prevent'])
    })
}

</script>

<template>
    <div>
        <NuxtRouteAnnouncer />

        <button
            type="button"
            v-on="{
                click: withModifiers(() => null, ['prevent'])
            }"
        />
    </div>
</template>

<script lang="ts" setup>
import type { FunctionalComponent } from 'vue'

const CustomButton: FunctionalComponent = () => {
    return h('button', {
        onClick: withModifiers(() => null, ['prevent'])
    })
}

</script>

Could someone please help me debug it further? I'd like to create an issue but first I'd like to figure out whether this is a nuxt issue or whether to blame i18n for it.

28 Replies

lency•2mo ago

I have the same problem

Thr0nSK•2mo ago

what Nuxt version are you using?

Kopča•2mo ago

I am having absolutely same issue, I just made almost the same post. I am thinking that it can be just issue with an IDE or extension, what IDE do you use?

Thr0nSK•2mo ago

I use WebStorm However, I don't think it's IDE related as vue-tsc shows the error in the console as well & the build fails too. @danielroe sorry for the ping but as multiple people posted about this, I wanted to ask whether you've encountered this already or not is there something I can help with? I haven't seen an issue about it in nuxt/nuxt, should I create one?

danielroe•2mo ago

Can you reproduce in a pure TS file with just running tsc?

Thr0nSK•2mo ago

what do you mean by pure ts file? we've only noticed it to be a problem in the <template> tag of a single file component

lency•2mo ago

latest version

lency•2mo ago

Yesterday there was no problem, today it started giving errors

danielroe•2mo ago

Is it a problem in a .ts file with defineComponent?

Kopča•2mo ago

I found solution, not ideal but when you downgrade version of vue from latest to 3.4.35 its fine. So probably some issue with newest vue version

danielroe•2mo ago

Might be an issue if you have multiple versions of vue installed? until 22 min ago, 3.4.35 was the latest version

Wazbat•2mo ago

I'm getting this same error, accidentally opened a duplicate

Kopča•2mo ago

I was wrong, my IDE probably didn't load the errors, now I see them. Older vue version doesn't fix it Okey in my case it has to do something with @nuxtjs/i18n module... when I remove it from modules array in nuxt config, error goes away

Thr0nSK•2mo ago

that's what helped me too, but only in a small reproduction.. didn't help in my main project

Kopča•2mo ago

Here is the minimum reproduction: https://stackblitz.com/edit/github-4ay9hh-wvhsu1?file=app.vue It doesn't show error there but it shows this in VSCode when you clone it

Gaming

Programming

Auto imported functions show type error in <template>