Nuxt•2y 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>

<template>

tag.

For example, the function

withModifiers()

withModifiers()

from vue works correctly in the

<script>

<script>

tag, however, when I use it in the

<template>

<template>

, vue-tsc says that

Property 'withModifiers' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>...

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"
}

{
    "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,
        },
    },
})

// 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>

<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.

lency•8/6/24, 11:27 AM

I have the same problem

Thr0nSKOP•8/6/24, 1:32 PM

what Nuxt version are you using?

Kopča•8/6/24, 1:34 PM

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•8/6/24, 1:41 PM

I use WebStorm

Thr0nSKOP•8/6/24, 1:42 PM

However, I don't think it's IDE related as

vue-tsc

vue-tsc

shows the error in the console as well & the build fails too.

Thr0nSKOP•8/6/24, 1:45 PM

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

TThr0nSK @danielroe sorry for the ping but as multiple people posted about this, I wanted...

danielroe•8/6/24, 1:47 PM

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

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

Thr0nSKOP•8/6/24, 1:59 PM

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

TThr0nSK what Nuxt version are you using?

lency•8/6/24, 2:01 PM

latest version

lency•8/6/24, 2:03 PM

Yesterday there was no problem, today it started giving errors

TThr0nSK what do you mean by pure ts file? we've only noticed it to be a problem in the <...

danielroe•8/6/24, 2:09 PM

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

Kopča•8/6/24, 2:13 PM

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•8/6/24, 2:22 PM

Might be an issue if you have multiple versions of vue installed?

danielroe•8/6/24, 2:22 PM

until 22 min ago, 3.4.35 was the latest version

Wazbat•8/6/24, 2:38 PM

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

Ddanielroe until 22 min ago, 3.4.35 _was_ the latest version

Kopča•8/6/24, 3:06 PM

I was wrong, my IDE probably didn't load the errors, now I see them. Older vue version doesn't fix it

Kopča•8/6/24, 3:37 PM

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

KKopča Okey in my case it has to do something with @nuxtjs/i18n module... when I remove...

Thr0nSKOP•8/6/24, 3:50 PM

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

Kopča•8/6/24, 3:50 PM

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

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

Thr0nSKOP•8/6/24, 3:51 PM

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

KKopča Here is the minimum reproduction: https://stackblitz.com/edit/github-4ay9hh-wvhs...

Thr0nSKOP•8/6/24, 3:51 PM

it should show the error by running tsc

xmatthias•8/6/24, 6:15 PM

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

@nuxtjs/colormode

From the discussion - it breaks down to "does the installed packge do:

declare module 'vue' {

declare module 'vue' {

declare module '@vue/runtime-core' {

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•8/6/24, 6:32 PM

I also have a problem with some VueUse functions. Example

FrozenSpirit•8/6/24, 6:39 PM

Even Nuxt

navigateTo

navigateTo

seems to have issues

FrozenSpirit•8/6/24, 6:44 PM

Ah I guess its also related to https://github.com/nuxt/nuxt/issues/28373

FrozenSpirit•8/6/24, 6:49 PM

Altho I set

"vue-router": "4.4.3"

"vue-router": "4.4.3"

and clean installed, issues are still here, seems like something else in my case

FrozenSpirit•8/6/24, 6:54 PM

@danielroe Is it worth opening another issue, as I already see quite some related to the error (mostly for vue-router tho)?

danielroe•8/7/24, 10:19 AM

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•8/7/24, 12:03 PM

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: npm@9.6.6 Builder: - User Config: devtools, typescript, vue...