Installing solid-js breaks Svelte components when imported using TypeScript

[mayank99]

What version of astro are you using?

1.0.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

WIndows

Describe the Bug

Installing solid-js (even without @astrojs/solid-js) shows the following error in a svelte component when imported in another svelte component using <script lang="ts">.

Type '{}' is not assignable to type 'IntrinsicAttributes & Test__SvelteComponent_'.
  Type '{}' is missing the following properties from type 'Test__SvelteComponent_': $set, $on, $destroy, $$prop_def, and 5 more.ts(2322)

Link to Minimal Reproducible Example

https://github.com/mayank99/astro-svelte-solid-error

Participation

• I am willing to submit a pull request for this issue.

[FredKSchott]

@Princesseuh any idea what could be causing this?

[Princesseuh]

Investigated this, it's an issue in their tooling. I'm not quite sure exactly why it happens, but you can solve it by using their new TS output by setting svelte.plugin.svelte.useNewTransformation to true!

They are planning to switch to the new transformation as default soon (see sveltejs/language-tools#1552). Until then, we can document it, I'll make an issue / PR on docs

Thank you for reporting the issue @mayank99!

[dummdidumm]

The problem is that Solid uses JSX, and our (soon old) transformation for proper intellisense also uses JSX under the hood, but the JSX type definitions clash.