Vue element cannot be used as a JSX component

[flashspys]

This error looks like a duplicate of #553 but still happens in version v0.28.10. We have the following minimal file example

<template>
    <Event />
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import Event from "../event/Event.vue";

export default defineComponent({
  components: {
    Event,
  },
});
</script>

The <Event /> tag in the template row is red underlined with the following error:

'__VLS_9' cannot be used as a JSX component.
  Its instance type 
  'object & Record<never, any> & Vue & { $data: Data; $props: Readonly<Partial<{}> & Omit<{ event: EventListEventFieldsFragment; } & {}, never>>; $attrs: Data; } & ... 4 more ... & Omit<...>'
  is not a valid JSX element.
ts(2786)

We are using Volar with take-over-mode enabled and Typescript 4.4.2. Is this error message due to a bug in Volar or a configuration mistake from our side?

[johnsoncodehk]

Hi @flashspys, please provide a repro case so I can check the problem.

And also make sure you have correct setup for vue 2, see https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#using.