Nuxt•2y ago•

35 replies

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

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.

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

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.

Auto imported functions show type error in <template>

Auto imported functions show type error in <template>

Similar Threads

Similar Threads

Similar Threads