Volar breaks @types/react in monorepo when using takeover mode

[sqal]

Version

Volar: 1.8.3
TypeScript: 5.1.6

Steps to reproduce

• Clone https://github.com/sqal/volar-react-types-bug
• Make sure takeover mode is enabled (@builtin TypeScript and JavaScript Language Features extension is disabled)
• Install dependencies npm run i
• Open apps/react-app/src/main.tsx
• You can run npm run type-check to verify there's no issue in my app

What is actually happening?

I see a lot of Typescript errors reported in my app that I shouldn't see, e.g.

Type 'Element' is not assignable to type 'ReactNode'.

What is expected?

No Typescript errors in react-app since all the code is correct.

Any additional comments?

It looks like volar breaks @types/react when I have installed vue somewhere in my monorepo. Follow these steps to verify:

• Go to apps/vue-app and remove vue from the dependencies
• cd ../../ & npm i
• Restart volar's server or restart vscode
• Now everything works fine in my react-app, there's no issues

[kylekz]

Also running into this. We have a monorepo with a Vue 3.x app and a Node backend that uses react-email. Using Volar renders the React/JSX part of react-email and the .tsx files almost unusable to due the amount of false negatives in terms of type errors. Disabling Volar and re-enabling the builtin Typescript extension works fine, but isn't really a good option when working on a monorepo with Typescript and Vue apps.

Update: This seems isolated to the Vue Language Features (Volar) extension and a change made between 1.6.4 and 1.8.0. Keeping TypeScript Vue Plugin (Volar) on latest (1.8.8) but downgrading the Vue LSP down to 1.6.4 "solves" the issue. My project isn't using TS 5.1 nor Vue 3.3 features (but is pinned to 3.3) yet so this is a temporary solution I suppose.

The only change related to JSX that I'm seeing in the changelog is #3259 as part of 1.7.10.

[moritzkalwa]

We are seeing this issue as well in a vue project with several dependencies that rely on react. For now we are staying on vue-tsc version 1.6.5, but we might have to simply ignore those errors in the future if this is not fixed. #3259 looks like an obvious candidate for where this issue might have been introduced. Given that PR was only meant to improve performance but broke multiple projects, simply reverting that change might be the better way.

[johnsoncodehk]

This seems to be a TS internal bug, for https://github.com/sqal/volar-react-types-bug, you can create the following file for to reproduce the error with the built-in TS extension.

// apps/react-app/src/_types.d.ts
import 'vue';

#3259 changes have been reverted by #3279 since v1.7.12.

But anyway, #3534 will solve this problem. and 2.0 will also no longer require takeover mode.