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

[kingyue737]

vue2 project. I've upgraded to v0.37.1 and added "experimentalSuppressUnknownJsxPropertyErrors": true explicitly.
After reloading volar and restarting vscode several times, this bug still exists

status bar:

tsconfig:

[yuniit]

+1

[kingyue737]

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

using experimentalSuppressInvalidJsxElementTypeErrors instead of experimentalSuppressUnknownJsxPropertyErrors suppressing the error, but losing all the types

[NikhilVerma]

experimentalSuppressInvalidJsxElementTypeErrors does indeed fix this problem (0.37.1). Thanks for the quick turnaround. Let's probably add it also in the README.md for other developers.

[kingyue737]

@NikhilVerma can you reopen this issue as experimentalSuppressInvalidJsxElementTypeErrors will make all global components become any in vue2 project

[sid-6581]

experimentalSuppressInvalidJsxElementTypeErrors doesn't work for me at all in Vue 3, I still keep getting the same errors. I copied it verbatim into my tsconfig, and the errors are still there. Having to add everything in components.d.ts seems like a very tedious and frustrating solution.

[mdoi2]

Converting the tag of the component in error from the kebab case to the pascal case seems to eliminate the error.

Apologies if this report is already well known to you all.

[monster898]

Converting the tag of the component in error from the kebab case to the pascal case seems to eliminate the error.

Apologies if this report is already well known to you all.

I'm using vite + vue3 and it doesn't seem to be working for me.

[muzhichu]

Converting the tag of the component in error from the kebab case to the pascal case seems to eliminate the error.
Apologies if this report is already well known to you all.

I'm using vite + vue3 and it doesn't seem to be working for me.

i have same question

[Delevin888]

+1

[mdoi2]

Converting the tag of the component in error from the kebab case to the pascal case seems to eliminate the error.
Apologies if this report is already well known to you all.

I'm using vite + vue3 and it doesn't seem to be working for me.

I am also using vite + vue3.

vite: 2.9.10
vue: 3.2.37
typescript: 4.7.3

Volar v0.36.1 (kebab case)

Volar v0.37.1 (kebab case)

Volar v0.37.1 (pascal case)

Sorry, I only reported the phenomena I observed and do not understand the details.
I reported it in the hope that it would be of some help in the investigation.

[hechuanhua]

我用vue-router得到了这个，特别是。0.36 没问题。0.37JSX element type 'RouterView' does not have any construct or call signatures.和JSX element type 'RouterLink' does not have any construct or call signatures..

@zlotnikaGlobalComponents您可以通过接口为 vue-router 和项目组件定义全局组件类型，请参阅https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage。

或者在 v0.37.1 中，您可以配置实验性抑制未知JsxPropertyErrorsexperimentalSuppressInvalidJsxElementTypeErrors = true忽略未知的组件类型错误。

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

感谢，找了半天的原因终于找到解决方案了

[ghost]

It's Runtime Status shows a message: Error: the pattern with the identifier $tsc doesn't exist.
Dose it matter?

[szulcus]

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.

I didn't have it installed (I don't think nuxt needs it), but I added it to the types just to be sure. I still have the same error. Installing version 0.36.1 helped. Thanks @noah-osso!

[JCAlways]

头发都快掉完了,终于发现怎么解决了

[pengxiaotian]

这个bug 在 0.37.2 中 并没有解决啊？！还是报错！

[pengxiaotian]

并且还发现 属性不识别？ dataSetId 和 data-set-id 不匹配。

[dschreij]

using experimentalSuppressInvalidJsxElementTypeErrors instead of experimentalSuppressUnknownJsxPropertyErrors suppressing the error, but losing all the types

@kingyue737 I guess you are using Vuetify, am I correct? I have the same problem in that you lose all type inference of Vuetify components with the configuration above, but are you sure you had type inference of these components before? I reverted back to 0.36.1 and with that version each vuetify component for me is also typed as any in the template.

[yzdbg]

tsconfig:

v0.37.0 seems to have renamed experimentalCompatMode as denoted in their breaking changes section :

[kingyue737]

@kingyue737 I guess you are using Vuetify, am I correct? I have the same problem in that you lose all type inference of Vuetify components with the configuration above, but are you sure you had type inference of these components before? I reverted back to 0.36.1 and with that version each vuetify component for me is also typed as any in the template.

@dschreij Vuetify 2 doesn't support volar officialy. I generate vuetify component types myself. See the guide in this comment. @me in that issue if you meet any problem.

[abaumg]

For the record: updating Volar to the latest version 0.37.3 fixes this issue.

[E-jarod]

It doesn't work for slots props though

[dschreij]

@kingyue737 I copied and ran your script and it works great in generating the type files! Thanks for it.
Did you have any luck getting the typings to work again after the problems reported in this thread, or also no luck since?

[kingyue737]

@dschreij this bug has already been fixed one month ago. You can try the latest volar v0.38.5 published one hour ago. I'm using v0.38.3 which seems stable.

[kingyue737]

@dschreij Or you can use the new @volar-plugins/vetur to profit vetur component data with volar in a non-Typescript project.

[JessicaSachs]

FWIW, I'm still running into this issue on the latest version of Volar @johnsoncodehk (0.38.5). Here's a reproduction https://github.com/JessicaSachs/vuejs-forge-the-project/tree/jess/reproduction-of-volar-issue

The src/components/AppButton.cy.tsx file is having issues.

Source code for that component is straightforward.

<script setup lang="ts">
import { Button as KButton } from "@progress/kendo-vue-buttons";
</script>
<template>
  <KButton v-bind="$attrs">
    <slot></slot>
  </KButton>
</template>

[johnsoncodehk]

@JessicaSachs I'm not sure the reason yet, but you can remove this error by add "node" to compilerOptions.types.

• tsconfig.cypress.json

{
  "extends": "./tsconfig.app.json",
  "include": ["**/*.cy.*"],
  "exclude": [],
  "files": ["./cypress.d.ts"],
  "compilerOptions": {
    "isolatedModules": false,
    "composite": true,
    "lib": ["DOM"],
    "jsx": "preserve",
-    "types": ["cypress"],
+    "types": ["node", "cypress"],
  }
}

[dschreij]

@dschreij Or you can use the new @volar-plugins/vetur to profit vetur component data with volar in a non-Typescript project.

@kingyue737 it was working after all! I just had to set the strictTemplates setting to false in tsconfig.json, and now typing of vuetify components is working beatifully.
If I understand you correctly, the plugin you describe is only useful for non-TS projects? We are using TS so I guess it is recommendable to follow the approach you suggested before (e.g. generating the type descriptions of Vuetify components).

[kde3kko]

Hi! I know this is already closed but someone might find this relevant and/or helpful.

I'm using Volar 0.40.9 on a vue2.7 + typescript setup and this is still present.
I also confirm that this is not present when using 0.36.1

I suspect that between 0.36.1 and later versions something changed in how Volar detects the component registration, but I haven't digged inside the code so it's pure speculation.

What I found is that when importing and locally registering components, doing the mapping explicitly with the kebab-case works, e.g.

import FirstChild from './whatever'
import SecondChild from './whatever'

export default defineComponent({
  name: 'ParentComponent',
  components: {
     //<first-child> will be recognized correctly in template!
    'first-child': FirstChild,
    //<second-child> will throw 'JSX element type 'SecondChild' does not have any construct or call signatures'
    SecondChild,
  },
  ...
})

I adopted the manual kebab-case mapping approach for now, I can get more insights on this and/or give more feedback if it's needed.

[nos-nart]

Volar v0.40.9 still cope with this issue, Using package unplugin-vue-components auto import component will show type warning. Temporarily roll back to v0.40.8

[grindpride]

Still actual with "vue-tsc": "^1.0.8"

Ts config

  "vueCompilerOptions": {
    "target": 3,
    "jsxTemplates": true,
    "experimentalRfc436": true,
  }

Error:
error TS2604: JSX element type 'SlickItem' does not have any construct or call signatures.

d.ts of component library

declare module 'vue-slicksort' {
  import { DirectiveOptions, Component } from 'vue';

  export const ContainerMixin: Component;
  export const ElementMixin: Component;

  export const SlickList: Component;
  export const SlickItem: Component;

  export const HandleDirective: DirectiveOptions;

  export function arrayMove<T>(arr: Array<T>, prevIndex: number, newIndex: number): Array<T>;
}

[johnsoncodehk]

@grindpride Component type invalid in JSX, you can try use DefineComponent or FunctionComponent instead of.