>= 2.0.22 incorrectly? reports JSX errors in templates

[JakeCodeSmith]

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

[JakeCodeSmith]

Update: it seems that removing vueCompilerOptions from tsconfig.json fixes this issue... which is odd.

[johnsoncodehk]

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.

[johnsoncodehk]

I will add workspace diagnostics to report when vueCompilerOptions is inconsistent with the Vue version.

[JakeCodeSmith]

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)?