TypeScript error for @click - Type '() => void' is not assignable to type 'undefined'

[ttntm]

Updated to VS Code 1.60 (TypeScript 4.4) today and started seeing these TS errors in my SFC's:

<script setup lang="ts">
  ...
  const onFilterBtnClick = () => windowOpen.value === 0 ? showWindow(3) : showWindow(0)
  ...
</script>

<template>
  ...
    <ButtonFilter :window="windowOpen" @click="onFilterBtnClick" />
  ...
</template>

There were no issues when I worked on the project last week.

Full component: https://github.com/ttntm/recept0r-ts/blob/main/src/views/Home.vue

This TS error happens to any @click attributes that are attached to components with props defined via TypeScript (as described here: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features):

• @click for components with TS props: (property) click: undefined
• @click for components without TS props: (property) click: ((...args: any[]) => any) | undefined

...copying that type definition into the button component's defineProps doesn't make any difference; any type for property click seems to be ignored.

[johnsoncodehk]

I can't reproduce this problem, please try update your deps.

[johnsoncodehk]

Duplicate of #460

[ttntm]

Thanks, I didn't find #460 before opening this one, should have looked more carefully.

Edit: removed to avoid misinformation.

[johnsoncodehk]

No click event should be (property) click: ((payload: MouseEvent) => void) | undefined by default, if it not it's a bug.

[ttntm]

No click event should be (property) click: ((payload: MouseEvent) => void) | undefined by default, if it not it's a bug.

This is what I get "by default" after running npm update:

vue@3.2.9
vite@2.5.4
vite plugin-vue@1.6.1

[johnsoncodehk]

Have you try delete package-lock.json / yarn.lock + node_modules and reinstall it?

[ttntm]

Not yet, will give it another try tomorrow and test on another machine too.

Will report back with additional info.

Thanks!

[ttntm]

Good morning, just deleted node_modules and package-lock.json, reinstalled and @click types are working correctly again.

Still no idea what broke it, might look into it some more if it ever happens again.

Thanks for your time and tips @johnsoncodehk, really appreciate it!

[vincerubinetti]

I found that reinstalling node_modules didn't work for me.

Here's something strange I noticed though: I have a custom component that I'm using a @click.stop attribute on, with no ="" or anything, and it's giving me the error. But oddly, if I change the tag name from my custom component to a built-in HTML component, e.g. <button>, the error goes away. Another remedy is to just specify a blank attribute (which I guess Vue treats as undefined?) like this: <CustomComponent @click.stop=""/>

[johnsoncodehk]

@vincerubinetti fixed by 94d1546.

[omarmfs98]

make sure you don't have this extension installed in visual studio code: Vue Language Features (Fly), uninstalling it removed that underline

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Vue.volar

[ldsenow]

This issue appears again on v1.0.3. This version has a few breaking changes e.g. this issue and also kebab-case prop

[jbaubree]

@ldsenow new issue was created for that #1985

[xieyuheng]

Here is a minimal vue component for you to reproduce this problem:

"vue-tsc": "^1.0.7"

Error:

src/components/Link.vue:8:6 - error TS2322: Type '() => void' is not assignable to type 'MouseEvent'.

8     @click="
       ~~~~~

<script setup lang="ts">
// We can not use <RouterLink> in headlessui:
// - https://github.com/tailwindlabs/headlessui/issues/143
</script>

<template>
  <span
    @click="
      () => {
        if (typeof $attrs.href === 'string') {
          if ($attrs.mode === 'replace') {
            $router.replace($attrs.href)
          } else {
            $router.push($attrs.href)
          }
        }
      }
    "
    ><a class="cursor-pointer"><slot /></a
  ></span>
</template>

[joker77877]

Here is a minimal vue component for you to reproduce this problem:

"vue-tsc": "^1.0.7"

Error:

src/components/Link.vue:8:6 - error TS2322: Type '() => void' is not assignable to type 'MouseEvent'.

8     @click="
       ~~~~~

<script setup lang="ts">
// We can not use <RouterLink> in headlessui:
// - https://github.com/tailwindlabs/headlessui/issues/143
</script>

<template>
  <span
    @click="
      () => {
        if (typeof $attrs.href === 'string') {
          if ($attrs.mode === 'replace') {
            $router.replace($attrs.href)
          } else {
            $router.push($attrs.href)
          }
        }
      }
    "
    ><a class="cursor-pointer"><slot /></a
  ></span>
</template>

I encountered the same problem in the Nuxt3 project.

[harjim]

when i run build.

"@types/node": "^18.8.5",
"@vitejs/plugin-vue": "^3.1.2",
"typescript": "^4.8.4",
"vite": "^3.1.7",
"vue": "^3.2.40",
"vue-tsc": "^1.0.7"

[ldsenow]

Downgrade to types/18.8.0 fixed the issue for me

[harjim]

Downgrade to types/18.8.0 fixed the issue for me

yeah, I just solved

[Amixx]

Downgrade to types/18.8.0 fixed the issue for me

thanks a lot, this resolved this issue for me!

[Utitofon-Udoekong]

Downgrade to types/18.8.0 fixed the issue for me

Sorry newbie here. How do I downgrade this in nuxt 3?

[joker77877]

Downgrade to types/18.8.0 fixed the issue for me

Sorry newbie here. How do I downgrade this in nuxt 3?

npm i @types/node@18.8.0

[xieyuheng]

This issue will be fixed after we merge: vuejs/core#6855

[frederikheld]

@omarmfs98 your solution is like little kids playing hide and seek: If I cover my eyes, nobody can see me.

Apparently the problem is not within Volar, so uninstalling Volar will not make it go away, you will just not see it anymore - like a lot of other useful stuff Volar is showing you.

[microHoffman]

Any updates on this? I have updated dependencies and I still see this in my ts errors:

Type '(e?: MouseEvent) => Promise<void | NavigationFailure>' is not assignable to type '(payload: KeyboardEvent) => void'.
  Types of parameters 'e' and 'payload' are incompatible.
    Type 'KeyboardEvent' is missing the following properties from type 'MouseEvent': button, buttons, clientX, clientY, and 12 more.

Template:

        <router-link
          v-for="(navigationItem, index) of navigationItems"
          :key="index"
          v-slot="{ isActive, navigate }"
          ...>
          <div
              @click="navigate"
              <!-- following line creates the error above -->
              @keypress.enter="navigate">

[rbluethl]

Downgrade to types/18.8.0 fixed the issue for me

Any news on this? I just downgraded to 18.8.0 which solved it for me for now.