I'm not sure if this is a bug or an issue on my end. This was working previously until an update so.
I have a simple project that I've created to reproduce the bug:
https://github.com/3lpsy/testing-vue-class-component-bug
When using the @Component decorator with the components option, I receive the error: No overload matches this call (full error below).
npm install
npm run build
ERROR in /home/vanguard/Playground/testcomponent/src/views/Home.vue
12:2 No overload matches this call.
Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> & ThisType<Vue>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
Type '{ name: string; props: { msg: StringConstructor; }; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<...>; }'.
Property 'name' is incompatible with index signature.
Type 'string' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<...>'.
Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
Argument of type '{ components: { name: string; props: { msg: StringConstructor; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
Yeah sorry, I guess the demo didn't match my project as accurately as expected. The actual issue was that I had components that implemented blank mixins like:
export default HelloDarkness extends mixins(OldFriendMixin) {
... lots of stuff
}
... where there is no stuff in between {}
export default OldFriendMixin extends Vue {}
I was sort of just adding a few blank mixins that I was going to do something with later. When I removed the blank mixins, the error went away.
@ktsn
Same ts IDE warning with ShallowMount of vue-utils (MainFilter is name of my @Component class):
No overload matches this call.
Overload 1 of 3, '(component: VueClass<Vue>, options?: ThisTypedShallowMountOptions<Vue>): Wrapper<Vue>', gave the following error.
Argument of type 'typeof MainFilter' is not assignable to parameter of type 'VueClass<Vue>'.
Type 'typeof MainFilter' is not assignable to type 'new (...args: any[]) => Vue'.
Type 'MainFilter' is missing the following properties from type 'Vue': $el, $options, $parent, $root, and 23 more.
but tests with ts-jest are running without warnings
Solved by using Mixins (BaseClass) instead of extends BaseClass (firstly trying to add another mixin)
@3lpsy When i removed Mixins error reappeared
Your
componentsoption is wrong. It should be an object.
Please, next time consider using forum, chat room or Stack Overflow to ask your question especially you are not sure if it is a bug or not. Thank you.@Component({ components: { HelloWorld } })
Thank you for solving my problem that wasted me hours.
@3lpsy would you please show that test repo you had? I have the same problem and still can't figure out what I'm doing wrong.
Most helpful comment
@3lpsy would you please show that test repo you had? I have the same problem and still can't figure out what I'm doing wrong.