language-tools: Native DOM event type checking error since upgrading to 1.0.3

Native DOM event type checking error. (click, contextmenu, etc.)

vue@3.2.40 vite@3.1.7 vitejs/plugin-vue@3.1.2 vue-tsc@1.0.3 volar@1.0.3

I have deleted and installed yarn.lock + node_modules.

<template>
  <div @click="test"></div>
</template>

<script setup lang="ts">
  const test = () => {}
</script>

Type ‘() => void’ is not assignable to type ‘MouseEvent’.ts(2322) __VLS_types.ts(107, 56): The expected type comes from property ‘click’ which is declared here on type ‘EventObject<undefined, “click”, {}, MouseEvent | undefined>’ image

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 28
  • Comments: 43 (7 by maintainers)

Commits related to this issue

Most upvoted comments

For me it works after pinning @types/node to 18.8.0 (+removing lockfile and reinstall deps).

@ymy0622 I think you should leave this open. It’s not really a desired workaround to pin @types/node.

why is this issue closed but not yet fixed?

Please wait for 3.2.42 and pin @types/node to 18.8.0 for now. 😃

seems vue@3.2.41 has been released and fixed this problem. I upgraded vue and @types/node to the latest, and the error no longer exists.

We can’t fix this problem in language server, but we will have a doctor message to remind user downgrade @types/node to 18.8.0 or update to next vue release.

@types/node fixed this problem in 18.11.1, 18.11.2 and later version by https://github.com/DefinitelyTyped/DefinitelyTyped/pull/62782, please upgrade to fix.

But Volar 1.0.8 will still have doctor warns for 18.11.1, 18.11.2 because we can’t hot update the version judge, please just ignore the warning or you can disable doctor (not recommend) by add "volar.doctor.statusBarItem": false VSCode setting.

seems vue@3.2.41 has been released and fixed this problem. I upgraded vue and @types/node to the latest, and the error no longer exists.

Sadly this doesn’t seem to be the case for many. v3.2.40…v3.2.41 shows no indication of any fix for this and the actual fix (vuejs/core#6855) is yet to be merged and released.

@IagoLast make sure to put “@types/node”: “18.8.0” and not “@types/node”: “^18.8.0”. Edit: remove node_modules folder and lock file before install again.

@ymy0622 are you sure this is a real solution and not a workaround before fix ?

@warmthsea remove “^” from the version number so it installs that specific version.

18.8.0 didn’t work for me but 18.7.14 did.

For me it works after pinning @types/node to 18.8.0 (+removing lockfile and reinstall deps).

Wow, it works. Thank you very much.

Also works for me.

For me it works after pinning @types/node to 18.8.0 (+removing lockfile and reinstall deps).

Wow, it works. Thank you very much.

@johnsoncodehk Shouldn’t Volar have a new version disabling the doctor warning now?

For me it works after pinning @types/node to 18.8.0 (+removing lockfile and reinstall deps).

it works.

This issue persists as of @types/node 18.8.5.

@warmthsea Thanks for that. By removing "^" fixed the issue.

Downgrading the @types/node to 18.8.0 didn’t help in my project. I am still facing the same issue

Here is my package.json:

“dependencies”: { “@headlessui/vue”: “^1.7.3”, “@heroicons/vue”: “^2.0.12”, “@tailwindcss/aspect-ratio”: “^0.4.2”, “@tailwindcss/forms”: “^0.5.3”, “@vueuse/core”: “^9.3.0”, “dotenv”: “^16.0.3”, “firebase”: “^9.11.0”, “firebase-admin”: “^11.1.0”, “pg”: “^8.8.0”, “pinia”: “^2.0.23”, “simple-git”: “^3.14.1”, “vue”: “^3.2.37”, “vue-router”: “^4.1.5” }, “devDependencies”: { “@pinia/testing”: “^0.0.14”, “@testing-library/vue”: “^6.6.1”, “@types/jsdom”: “^20.0.0”, “@types/node”: “^18.8.0”, “@types/pg”: “^8.6.5”, “@types/yargs”: “^17.0.13”, “@typescript-eslint/eslint-plugin”: “^5.40.0”, “@typescript-eslint/parser”: “^5.40.0”, “@vitejs/plugin-basic-ssl”: “^0.1.2”, “@vitejs/plugin-vue”: “^3.1.0”, “@vue/test-utils”: “^2.1.0”, “autoprefixer”: “^10.4.12”, “c8”: “^7.12.0”, “cross-env”: “^7.0.3”, “eslint”: “^8.25.0”, “eslint-config-prettier”: “^8.5.0”, “eslint-plugin-vue”: “^9.6.0”, “jsdom”: “^20.0.1”, “postcss”: “^8.4.17”, “prettier”: “2.7.1”, “tailwindcss”: “^3.1.8”, “ts-node”: “^10.9.1”, “types-package-json”: “^2.0.39”, “typescript”: “^4.6.4”, “vite”: “^3.1.0”, “vite-plugin-eslint”: “^1.8.1”, “vitest”: “^0.24.1”, “vue-tsc”: “^1.0.3” }

remove “^” from the version number so it installs that specific version. @Suv4o

我遇到了同样的问题,解决方案是切换 VSCode 的 TS 使用工作区版本。 操作方法为 Ctrl + Shift + P,输入 selectTypeScriptVersion,然后选择 Use Workspace Version。 image image

Same thing but when using vue-tsc from the console

Screenshot 2022-10-11 at 11 06 22