Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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