VScode produces error that's about Svelte, but mentions JSX!

[mikemaccana]

Describe the bug

import Chart
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)
Type definitions are missing for this Svelte Component. It needs a class definition with at least the property '$$prop_def' which should contain a map of input property definitions.
Example:
class ComponentName { $$prop_def: { propertyName: string; } }

'Chart' cannot be used as a JSX component.
  Its instance type 'Base' is not a valid JSX element.
    Property '$$prop_def' is missing in type 'Base' but required in type 'ElementClass'.

I understand this error (I need to provide TypeScript typings for the component) but the JSX element and JSX component is confusing - I'm not using React or JSX!

To Reproduce Minimal .svelte file:

<script lang="ts">
    export let name: string;
    import Chart from 'svelte-frappe-charts';

  const data = {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
      {
        name: "Dataset 1",
        values: [18, 40, 30, 35, 8, 52, 17, -4],
        chartType: 'bar'
      },
      {
        name: "Dataset 2",
        values: [30, 50, -10, 15, 18, 32, 27, 14],
        chartType: 'line'
      }
        ]
    }
</script>

<main>

    <Chart data={data} type="axis-mixed" />
</main>

Expected behavior A message that mentions Svelte, not some old framework!

System (please complete the following information):

• OS: Windows 10 20.04
• IDE: VScode
• Plugin/Package: Svelte for VScode v102.8.0

[dummdidumm]

I'm hesitant to remove the JSX-error because that's the original error TypeScript throws. If we think about possibility for translation in the future, people might be lost completely if they don't understand english. I will make it more clear though that this is an underlying message and also add some Svelte-specific prosa to TS2607.

[mikemaccana]

Thanks @dummdidumm I understand:

I'm hesitant to remove the JSX-error because that's the original error TypeScript throws.

Would it better to fix this upstream in TypeScript then?

[dummdidumm]

It's not a bug with TS because for type checking and other intellisense features (not the Svelte build!) we actually transform the code to tsx. You can read more about that here.

[mikemaccana]

Ah thanks for explaining @dummdidumm !

[pheuter]

Still running into this issue with the latest version of svelte and svelte-vscode.

[rburnham-def]

I'm seeing this error as well with latest svelte and svelte-check, How do you actually resolve it?

[jasonlyu123]

We no longer transform code into JSX for type-check under the hood. You're probably not using the latest major version. If this is not the case, please open a separate issue with reproduction.

[rburnham-def]

Yep, I was using an older version. I was actually trying to debug this error i am getting on the most recent version so i tried to roll back to our current version and thought it was the same error.

Svelte: Argument of type typeof RadioButton__SvelteComponent_ is not assignable to parameter of type ConstructorOfATypedSvelteComponent
Type RadioButton__SvelteComponent_ is missing the following properties from type ATypedSvelteComponent: $$prop_def, $$events_def, $$slot_def, $on
Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
import type { SvelteComponentTyped } from "svelte";
class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}

I'm not sure if this would be a language tools error still?

[jasonlyu123]

Without a reproduction, I can't tell how what the problem is, But it's most likely already explained in the error message. If you still can't understand what the problem is, see https://svelte.dev/docs/typescript#types-componenttype and https://github.com/sveltejs/language-tools/issues/486. There are plenty of examples you can reference. The question is unrelated to this issue, so if you have further support questions, you can ask them in the svelte discord