Vue-class-component: Bug: No overload matches this call

Created on 5 Nov 2019  路  6Comments  路  Source: vuejs/vue-class-component

I'm not sure if this is a bug or an issue on my end. This was working previously until an update so.

Demo Project

I have a simple project that I've created to reproduce the bug:

https://github.com/3lpsy/testing-vue-class-component-bug

Description

When using the @Component decorator with the components option, I receive the error: No overload matches this call (full error below).

Reproducing

npm install
npm run build

Full Error:

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'?

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.

All 6 comments

Your components option 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
  } 
})

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

Was this page helpful?
0 / 5 - 0 ratings