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

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

Reverting to version 0.36.1 looks safe.

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

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

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.

+1 vue3 + vite

+1

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

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:

@johnsoncodehk I suspect this commit broke it - https://github.com/johnsoncodehk/volar/commit/cc57bff0a7c028b81f9be5a5aea7f1028172f8f3 which was a fix for https://github.com/johnsoncodehk/volar/issues/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 https://github.com/johnsoncodehk/volar/issues/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.

Suddenly everything is broken after upgrading to 0.37. 😦

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

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

我用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 中，您可以配置~实验性抑制未知JsxPropertyErrors~experimentalSuppressInvalidJsxElementTypeErrors = true忽略未知的组件类型错误。

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

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

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>

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

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