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

Duplicate of #460

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

Edit: removed to avoid misinformation.

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

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:

[email protected]
[email protected]
vite [email protected]

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

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

Will report back with additional info.

Thanks!

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!

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 fixed by 94d1546.

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

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

@ldsenow new issue was created for that #1985

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>

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.

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"

Downgrade to types/18.8.0 fixed the issue for me

Downgrade to types/18.8.0 fixed the issue for me

yeah, I just solved

Downgrade to types/18.8.0 fixed the issue for me

thanks a lot, this resolved this issue for me!

Downgrade to types/18.8.0 fixed the issue for me

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

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/[email protected]

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

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

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

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.