The type definition of `$loading` conflicts with Buefy's one

[iwata]

Version

v2.4.0

Reproduction link

https://github.com/iwata/codesandbox-nuxt

Steps to reproduce

$ git clone git@github.com:iwata/codesandbox-nuxt.git
$ yarn install
$ yarn dev

What is expected ?

No type checking errors

What is actually happening?

It shows this error:

ERROR in /Users/iwata/.go/src/github.com/iwata/codesandbox-nuxt/node_modules/@nuxt/vue-app/types/index.d.ts(73,18):
TS2430: Interface 'NuxtApp' incorrectly extends interface 'Vue'.
  Types of property '$loading' are incompatible.
    Property 'open' is missing in type 'NuxtLoading' but required in type '{ open: (params: LoadingConfig) => { close: () => any; }; }'.

Additional comments?

If you import Buefy looks like plugins/buefy.ts, it declares $loading for Vue instance.
https://github.com/buefy/buefy/blob/dev/types/index.d.ts#L10
So NuxtApp extends the Vue, therefore $loading conflicts.
https://github.com/nuxt/nuxt.js/blob/v2.4.0/packages/vue-app/types/index.d.ts#L73-L74

_{This bug report is available on Nuxt community (#c8559)}

[kevinmarrec]

Well, there is the same issue for ElementUI if i'm right.

I don't know what we're supposed to do, both of frameworks (Nuxt & Buefy) are setuping the same variable so 😬

@manniL WDYT ?

The only solution could be to have the $loading definition outside of @nuxt/vue-app to avoid that but it sounds weird to not have it inside.

[TheAlexLichter]

@kevinmarrec The problem lies even deeper. If ElementUI and Buefy both use $loading, will they override the Nuxt.js $loading. Or will Nuxt override theirs?

We should think about how to properly avoid naming collisions like that.

[iwata]

Is it necessary to have a plugin namespace in Vue first?

[kevinmarrec]

@manniL I don't know, I guess they override Nuxt as they are Vue plugins (Vue.use) and instanciated on top of Nuxt ?

[sebkolind]

I have this issue with Element-ui also. Are there any clarifications on this? Maybe a temporary fix?

[kevinmarrec]

Sorry if we didn't find a workaround yet.

UI libraries shouldn't directly non-namespaced add properties to the Vue instance interface.
For example, Vuetify uses this.$vuetify.x, meanwhile Buefy & ElementUI directly use this.x, which is IMO not good. (this being a Vue instance)

The issue is that these 2 UI libraries can't change this behavior without breaking changes.

[sebkolind]

@kevinmarrec I understand, and I agree with you. Is there a way for us to make a workaround?

[TheAlexLichter]

@SebastianKS Ideally creating issues in the corresponding repos 🙈

[hartmut-co-uk]

I run into the issue with Element-ui as well.
I guess namespacing sounds like the way to go - but as @kevinmarrec mentioned this will come with breaking changes - so if rolled out as @deprecated via (several / major) releases until removed will take time..
Maybe it would be a good idea to escalate this to the vuejs team directly - to add documentation / guidelines to avoid such clashes going forward and with more frameworks, .. to come.

[bichikim]

I believe this is not a Nuxt-ts or element-ui issue
@iwata @hartmut-co-uk may you need to define the $loading type

import {ElLoading} from 'element-ui/types/loading'
import {ElMessage} from 'element-ui/types/message'
import {ElMessageBox} from 'element-ui/types/message-box'
import {ElNotification} from 'element-ui/types/notification'
declare module 'vue/types/vue' {
  interface Vue {
     readonly $loading: typeof ElLoading.service
     // maybe you will use these things also
     readonly $alert: typeof ElMessageBox.alert
     readonly $confirm: typeof ElMessageBox.confirm
     readonly $message: ElMessage
     readonly $msgbox: ElMessageBox
     readonly $notify: ElNotification
     readonly $prompt: typeof ElMessageBox.prompt
  }
}

[TheAlexLichter]

@bichikim The issue is that it's a naming collision between the $loading from nuxt and the one from ElementUI/Buefy.

[bichikim]

@manniL Oh i see~ in that case, fix element-ui loading at element-ui/lib/loading

[arambert]

This error prevents the command nuxt-ts generate from working...

In my case, it's conflicting with Buefy.
So as a dirty temporary fix, I've edited node_modules/@nuxt/vue-app-edge/types/index.d.ts with:

+export interface LoadingConfig {
+}

export interface NuxtLoading extends Vue {
  fail?(): void;
  finish(): void;
  increase?(num: number): void;
  pause?(): void;
  start(): void;
+  open: (params: LoadingConfig) => { close: () => any; };
}

[P-de-Jong]

For now i added the following to my tsconfig.json:

"compilerOptions": {
    "skipLibCheck": true
}

[AshleyCao]

@P-de-Jong's solution works for me