[Typescript] ERROR Failed to compile - No overload matches this call

Tell about your platform

• Vue.js version : 2.x with typescript
• Browser name and version : Chrome|Firefox|Edge x.x.x
• This package version : 3.x.x

Hi how are you everybody? i have somekind of issue when run the command vue-cli-service build --mode production with this lib, the thing is the next:

 vue-cli-service build --mode production


-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 ERROR  Failed to compile with 1 error2:16:10 PM

 error  in /srv/src/atomics/loaders/Spinner.vue

ERROR in /srv/src/atomics/loaders/Spinner.vue(17,2):
17:2 No overload matches this call.
  Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
    Type 'typeof LoadingPlugin' is not assignable to type 'VueConstructor<Vue> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<any, any, any, any> | FunctionalComponentOptions<...> | ComponentOptions<...>'.
      Type 'typeof LoadingPlugin' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 10 more.
  Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
    Argument of type '{ components: { Loading: typeof Loading; }; }' 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'?
    15 | import Loading from 'vue-loading-overlay';
    16 | 
  > 17 | @Component({
       |  ^
    18 |     components: {
    19 |         Loading,
    20 |     },

i am using the guide as component, what can i do in this situation? regards

[WIStudent]

The issue is that the types inside loading.d.ts are not correct.

declare class LoadingPlugin {
  static install: PluginFunction<PluginOptions>
}

export default LoadingPlugin

According to the d.ts file the default export is only a Vue plugin and not a vue component. But the index.js exports a combined plugin/component:

import Component from './js/Component.vue';
import LoadingApi from './js/api';
import './css/index.css';

const Plugin = (Vue, props = {}, slots = {}) => {
  let api = LoadingApi(Vue, props, slots);
  Vue.$loading = api;
  Vue.prototype.$loading = api;
};

Component.install = Plugin;

export default Component;

If you want to use vue-loading-component as a component you can just cast it to Component as a workaround:

import LoadingOverlay from "vue-loading-overlay";
import type { Component } from "vue";

export default defineComponent({
  name: "my-component",
  components: {
    "loading-overlay": LoadingOverlay as Component
  }
});

[erikhu]

@ankurk91 i did the minimal reproduction with a fresh vue project in ts. it’s more easy if you could clone it. on this way when you run the command you can see the error directly on the console

npm run serve

https://github.com/erikhu/minimal-reproduction-vue-loading