vuejs
>= 2.0.22 incorrectly? reports JSX errors in templates
Vue - Official extension or vue-tsc version
2.0.26
VSCode version
1.91.0
Vue version
3.4.32
TypeScript version
5.5.3
System Info
System:
OS: macOS 14.5
CPU: (8) arm64 Apple M3
Memory: 98.27 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.0 - ~/.volta/tools/image/node/18.18.0/bin/node
npm: 9.8.1 - ~/.volta/tools/image/node/18.18.0/bin/npm
Browsers:
Chrome: 126.0.6478.127
Safari: 17.5
Steps to reproduce
Install vue, vue-tsc, typescript, and @types/react (this is included by some of our storybook dependencies).
Attempt to add attributes to an element thats types differ in Vue from React e.g. @click or :ref={() => {}}
Minimal reproduction here: https://github.com/JakeCodeSmith/vue-tsc-jsx-issues
What is expected?
The templates should not be treated as JSX, and therefore not incorrectly compare element attributes to React's JSX types.
What is actually happening?
Errors due to React's JSX types being compared to template markup.
Link to minimal reproduction
https://github.com/JakeCodeSmith/vue-tsc-jsx-issues
Any additional comments?
This happened to work in 2.0.21 (which we had installed when we first started using storybook), though I understand this version did not report on some type issues. Now we cannot upgrade vue-tsc and get the various other type-fixes.
This was only highlighted to us as the Vue VSCode extension would complain about the JSX issues, and our type-check script would not (I assume because the extension was/is using a newer version of vue-tsc under the hood).
Update: it seems that removing vueCompilerOptions from tsconfig.json fixes this issue... which is odd.
The Vue version you installed is 3.4. After 3.3, IntrinsicElements was moved to vue/jsx-runtime. When your vueCompilerOptions.target is specified as 3, you will still try to reference IntrinsicElements from globalThis.JSX.IntrinsicElements instead of vue/jsx-runtime, thus cause problems.
Just remove "target": 3 and the language server will automatically infer vueCompilerOptions.target from the Vue version in node_modules.
I will add workspace diagnostics to report when vueCompilerOptions is inconsistent with the Vue version.
Hey, @johnsoncodehk, so what does specifying version 3 actually mean? Is that exactly 3.0.0 (as opposed to 3.x.x), or is it just that it's only relevant to <=3.3 (and therefore should warn)?
See: https://github.com/vuejs/language-tools/blob/63e6f51ef2a94e5d0dfebc907a3cff4811028d4a/packages/language-core/lib/codegen/globalTypes.ts#L49-L58.
