Nuxt•5mo 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": "[email protected]"
}

{
    "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": "[email protected]"
}

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•5mo ago

I have the same problem

Thr0nSKOP•5mo ago

what Nuxt version are you using?

Kopča•5mo 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?

Thr0nSKOP•5mo 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•5mo ago

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

Thr0nSKOP•5mo 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•5mo ago

latest version

lency•5mo ago

Yesterday there was no problem, today it started giving errors

danielroe•5mo ago

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

Kopča•5mo 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•5mo 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•5mo ago

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

Kopča•5mo 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

Thr0nSKOP•5mo ago

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

Kopča•5mo 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

Thr0nSKOP•5mo ago

I don't have my macbook with me at the moment, will test later but I don't think I'll be able to reproduce it wirh defineComponent since there is no <template> block It didn't seem to cause issues in the script tag no matter the context it should show the error by running tsc

xmatthias•5mo ago

https://github.com/vuejs/pinia/discussions/2729#discussioncomment-10203206 is part of this problem - what broke it for me (the inconsistency between pinia and vue-router - in combination with auto-import) i'm seeing this on a nuxt project too if i bump all versions to latest - though i didn't have time to investigate it yet (to me, it seemed to be related to @nuxtjs/colormode From the discussion - it breaks down to "does the installed packge do: declare module 'vue' { or declare module '@vue/runtime-core' {. if you're using 2 packages (probably also nuxt modules?) where one uses method A, and the other method B, you get exactly this error

FrozenSpirit•5mo ago

I also have a problem with some VueUse functions. Example

FrozenSpirit•5mo ago

Even Nuxt navigateTo seems to have issues 🤔🤔

FrozenSpirit•5mo ago

Ah I guess its also related to https://github.com/nuxt/nuxt/issues/28373 Altho I set "vue-router": "4.4.3" and clean installed, issues are still here, seems like something else in my case 🤔 @danielroe Is it worth opening another issue, as I already see quite some related to the error (mostly for vue-router tho)?

danielroe•5mo ago

If there's already an open issue, no need to open a new issue - just comment with a reproduction or any extra info, and ping me the link 🙏

Wazbat•5mo ago

Looks like there's a couple of similar issues being opened https://github.com/nuxt/nuxt/issues/28440

GitHub

error with vue-tsc 2.0.29 · Issue #28440 · nuxt/nuxt

Environment Operating System: Linux Node Version: v18.17.0 Nuxt Version: 3.12.4 CLI Version: 3.12.0 Nitro Version: 2.9.7 Package Manager: [email protected] Builder: - User Config: devtools, typescript, vue...

danielroe•5mo ago

If you have a reproduction, could you provide it? 🙏

data•5mo ago

also happening to me on 3.10.4 when removing lockfile + reinstall :Prayge:

danielroe•5mo ago

Investigated and have a PR

data•5mo ago

do you think we're going to get this in a 3.x release or will it be postponed to 4?

danielroe•5mo ago

3.x

export default•5mo ago

🙏

Gaming

Programming

Auto imported functions show type error in <template>

Did you find this page helpful?