Svelte for VS Code extension crushes react project

[florianGierlichs]

Describe the bug
After installing the Svelte for VS Code extension in my editor to work on a svelte project, a different project written in react and typescript completely crushes and throws ts error all over the place:

Type '() => svelte.JSX.Element' is not assignable to type 'FC<{}>'.
  Type 'Element' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'Element' is missing the following properties from type 'ReactElement<any, any>': type, props, key

literally every .tsx file throw errors, the project worked flawlessly before installing the svelte extension.

The only way I found so far, is to disable the extension every time I'm not working on a svelte project, which sucks, you know.

To Reproduce
Steps to reproduce the behavior:

Open a react-ts project with the svelte extension in VSCode i guess.

Expected behavior
svelte extension doesn't influence non-svelte projects

Screenshots

System (please complete the following information):

• OS: MAC OS
• IDE: VSCode
• Plugin/Package: "Svelte for VSCode"

[dummdidumm]

Did you enable the TypeScript plugin of the extension (https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#svelteenable-ts-plugin)? If yes, that could be the reason (though I need to investigate why this happens and fix that)

[florianGierlichs]

I tried with the plugin enabled and disabled. Both ways don't work, unfortunately.
I'm wondering, there are not more people who run into this problem...

[dummdidumm]

Is it every react project, or only specific ones? Which version of "Svelte for VS Code" is installed? I can't reproduce this.

[florianGierlichs]

I tried different react projects, the errors appear in every project.
"Svelte for VS Code": v105.3.5

[dummdidumm]

From the errors it sounds like the ambient definitions of svelte2tsx interfere with TSX somehow. But I fail to get why this would get picked up by TS, because the Svelte extension only operates on Svelte files, not TS(X) files. Only the TypeScript plugin would add Svelte capabilities, but we added a check recently to not initialize if a React project is detected - but you said you even get that behavior when the plugin is disabled, which is very strange. What's even more confusing is that the ambient definitions of svelte2tsx should not even get picked up because they are within the svelte.JSX namespace, which should not be picked up by React projects. Do you have svelte-check installed globally by any change, and if so, which version? If so, what happens if you uninstall it from the global modules?

[sudomf]

I'm having the same problem in a monorepo containing svelte and react projects.

[sudomf]

It backs to work if I disable the Svelte extension. Looks that somehow the extension is injecting the svelte-jsx.d.ts file.

[dummdidumm]

Could you check if the problem persists with the latest release of the Svelte extension (105.4.2) ?

[sudomf]

@dummdidumm still happening here

[danielquintero]

Could you check if the problem persists with the latest release of the Svelte extension (105.4.2) ?

Having the same issue in an Nx monorepo with svelte and react. Enabling svelte plugin (with/out ts support) breaks "react", same as @maykefreitas ☝🏼

[jasonlyu123]

Wondering if the tsserver reuses the same language service for both the react project and the svelte project. Can you try if adding a jsconfig.json to the svelte project root solved the problem?

Here's an example jsconfig:

{
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

[dummdidumm]

The most recent versions of the extension and svelte-check contain a new transformation behind a flag which should fix this issue. You can try out the new transformation using

• "Svelte for VS Code" version 105.11.1 and setting svelte.plugin.svelte.useNewTransformation to true
• svelte-check version 2.4.0 with the --use-new-transformation flag.

Please try it out, more info in #1352