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

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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 25 (5 by maintainers)

Commits related to this issue

fix: assign `() => {}` if event binding missing https://github.com/johnsoncodehk/volar/issues/464#issuecomment-1159303260 — committed to vuejs/language-tools by johnsoncodehk 2 years ago

Most upvoted comments

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

+16

ldsenow on Oct 11, 2022

This issue will be fixed after we merge: https://github.com/vuejs/core/pull/6855

+10

xieyuheng on Oct 14, 2022

Downgrade to types/18.8.0 fixed the issue for me

ldsenow on Oct 13, 2022

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!

ttntm on Sep 8, 2021

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

omarmfs98 on Oct 9, 2022

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

frederikheld on Oct 17, 2022

Downgrade to types/18.8.0 fixed the issue for me

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

Utitofon-Udoekong on Oct 13, 2022

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.

joker77877 on Oct 13, 2022

@ldsenow new issue was created for that https://github.com/johnsoncodehk/volar/issues/1985

jbaubree on Oct 11, 2022

@vincerubinetti fixed by https://github.com/johnsoncodehk/volar/commit/94d1546f57f0bbd101669abe2b119e9b4adc4e94.

johnsoncodehk on Sep 21, 2022

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

vincerubinetti on Jun 17, 2022