Dynamic component shows error for props with kebab-case

[dvdmlln]

Hi,

since 1.8.24 Volar shows an error when using a dynamic component with an imported component object and a kebab-case required prop.

Example:
FooBar component has a required prop fooBar. The following leads to an error Property 'fooBar' is missing in type.

<template>
  <component :is="FooBar" :foo-bar="text"></component>
</template>

<script>
import { FooBar } from '#components'
</script>

Best regards
David

[rchl]

#3750 is likely related.

[rchl]

Actually my testing shows that it works the same in both 1.8.22 and 1.8.24 so maybe I'm missing something. Can you provide a repo that reproduces this issue? It looks like the type of FooBar or the project configuration might be relevant.

[rchl]

FYI: I've been testing with this code since your example doesn't produce any errors in the project I've been using:

<template>
	<component :is="Foo" :stoke-width="'abc'" />
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

const Foo = defineComponent({
	props: {
		strokeWidth: { type: String, required: true },
	}
});
</script>

This produces and error in both Volar versions.

[dvdmlln]

I've set up an reproduction repo here: https://github.com/dvdmlln/vue-tsc-dynamic-component-props
Running npm run type-check produces an error. Setting vue-tsc to fixed version 1.8.22 does not produce an error.

[throrin19]

Same problem here, it works fine in 1.8.22 and no more in 1.8.24

[WangJincheng4869]

May I ask, when can this fatal bug be fixed?

[rchl]

You can but you won't get a specific answer.
In the mean time you can pin Vue extension to 1.8.22 in VSCode (the dropdown next to "Uninstall" button)

[gangsthub]

#3750 is likely related.

Also #3255

[so1ve]

#3774