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

[NikhilVerma]

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.

[johnsoncodehk]

Hi @NikhilVerma, since this is a departure from the original TS type behavior, I'll explore support vue-class-component in plugin API.

[sid-6581]

I'm getting this error on non class components as well. Something as simple as this will trigger it:

<template lang="pug">
.formgrid.grid
  slot
</template>

<script setup lang="ts"></script>

I also get the error if I have script setup with this before it:

<script lang="ts">
export default { inheritAttrs: false };
</script>

Not to mention I'm getting it on RouterLink from vue-router, which is not under my control.

[szulcus]

I have a similar problem (Nuxt 2, non class components)

[NikhilVerma]

@johnsoncodehk I suspect this commit broke it - cc57bff which was a fix for #1203

In many cases it's not possible to know all the potential component types (in my case vue-class-component syntax is not supported by Volar, so component types can't be extracted) same goes for global component types like transition-group.

My personal opinion on the original issue #1203 is that because the Vue ecosystem has a variety of syntaxes:

1. Options API without Vue.extend
2. Options API with Vue.extend
3. defineComponent API
4. vue-class-component
5. JSX API
6. Composition API

It will be a big pain to support all of them in the same project. We have a few potential solutions:

1. Cover all the cases for all the styles above
2. Revert the commit and rely on ESLint rules to catch the import of unused component
3. Publish several versions of Volar (@vue/vue2-volar) etc.

I think Option 2 is the most realistic given the variety we are dealing with.

[zlotnika]

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..

[npbenjohnson]

Is there a workaround for this in vscode for now? I have Vue 2 projects with globally registered Vuetify that have a distracting number of errors which don't represent runtime issues

[noah-osso]

Reverting to version 0.36.1 looks safe.

[Yoduh]

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..

same here. added to src/components.d.ts:

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink'];
    RouterView: typeof import('vue-router')['RouterView'];
  }
}

and error with vue-router went away, but created new error with importing anything from vue, e.g. import { ref } from 'vue'; gives error Module '"vue"' has no exported member 'ref'.
None of these issues exist after downgrading to Volar v0.36.0

[ldsenow]

Suddenly everything is broken after upgrading to 0.37. :(

[johnsoncodehk]

1. Options API without Vue.extend
2. Options API with Vue.extend
3. defineComponent API
4. vue-class-component
5. JSX API
6. Composition API

@NikhilVerma 2, 3, 5, 6 is supported type in template. 1 is supported with config vueCompilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent = true (it's default true for lang="js"). For 4, see #750 (comment).

[johnsoncodehk]

I have a similar problem (Nuxt 2, non class components)

@szulcus Make sure you have @vue/runtime-dom installed for vue 2, see https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage.

[llk2yq]

+1 vue3 + vite

[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
  }
}

[johnsoncodehk]

and error with vue-router went away, but created new error with importing anything from vue, e.g. import { ref } from 'vue'; gives error Module '"vue"' has no exported member 'ref'. None of these issues exist after downgrading to Volar v0.36.0

@Yoduh Please make sure component.d.ts has export { }