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

[erikhu]

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

[ankurk91]

I never used this package V3 with type script. No one has reported issues with using typescript yet. I am not sure how-to debug this issue

[ankurk91]

The path /srv/src/atomics/loaders/Spinner.vue does not belong to this package.

I am not sure if the error really coming from this package.

You might want to share a minimal re-production

[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

[ankurk91]

This package is not written in TS, it has manually defined types https://github.com/ankurk91/vue-loading-overlay/blob/v3.x/types/loading.d.ts

I am not a TS expert and would like someone to help here

[ankurk91]

I was able to compile TS with this code in your main.ts

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);

Then in App.vue

export default class App extends Vue {
  showLoader() {
    this.$loading.show({
      canCancel: true
    })
  }
}

[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
  }
});

[ankurk91]

Can someone help to update the type definition?

[ankurk91]

This must be fixed in v6

npm install vue-loading-overlay@^6