JSX element type does not have any construct or call signatures.ts(2604)

This happens when using vue-class-component. Here is an example snippet. (Taken from https://class-component.vuejs.org/guide/class-component.html#other-options and converted to TS)

<template>
  <OtherComponent />
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import OtherComponent from './OtherComponent.vue'

@Component({
  components: {
    OtherComponent
  }
})
export default class HelloWorld extends Vue {}
</script>

This happens because https://github.com/johnsoncodehk/volar/tree/master/packages/vue-language-service does not support vue-class-component syntax, so volar can’t understand where the component definition is coming from.

I believe vue-class-component is still officially supported by Vue team, so we should have support for it in Volar as well.

[noah-osso]

Reverting to version 0.36.1 looks safe.

[johnsoncodehk]

I’m getting this with vue-router, in particular. 0.36 is fine. 0.37 does JSX element type 'RouterView' does not have any construct or call signatures. and JSX element type 'RouterLink' does not have any construct or call signatures..

@zlotnika You can define global component type by GlobalComponents interface for vue-router and project components, see https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage.

Or in v0.37.1, you can config experimentalSuppressUnknownJsxPropertyErrorsexperimentalSuppressInvalidJsxElementTypeErrors = true to ignore unknown component type errors.

// tsconfig.json
{
  "vueCompilerOptions": {
    "experimentalSuppressInvalidJsxElementTypeErrors": true
  }
}