Nuxt-TS Build Error: Subsequent property declarations must have the same type.

[ykamal]

Versions

-1.7.11

Describe the bug

When using yarn generate on a nuxt + typescript + nuxt-composition-api project, I'm getting this error:

Text:

ERROR in node_modules/vue-toastification/src/types/index.ts:251:5
TS2717: Subsequent property declarations must have the same type.  Property '$toast' must be of type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }', but here has type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }'.
    249 | declare module "vue/types/vue" {
    250 |   interface Vue {
  > 251 |     $toast: ReturnType<typeof ToastInterface>;
        |     ^^^^^^
    252 |   }
    253 |
    254 |   interface VueConstructor {

ERROR in node_modules/vue-toastification/src/types/index.ts:255:5
TS2717: Subsequent property declarations must have the same type.  Property '$toast' must be of type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }', but here has type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }'.
    253 |
    254 |   interface VueConstructor {
  > 255 |     $toast: ReturnType<typeof ToastInterface>;
        |     ^^^^^^
    256 |   }
    257 | }
    258 |

ERROR in node_modules/vue-toastification/src/types/index.ts:261:5
TS2717: Subsequent property declarations must have the same type.  Property '$toast' must be of type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }', but here has type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }'.
    259 | declare module "@nuxt/types" {
    260 |   interface NuxtAppOptions {
  > 261 |     $toast: ReturnType<typeof ToastInterface>;
        |     ^^^^^^
    262 |   }
    263 | }
    264 |

ERROR in node_modules/vue-toastification/src/types/index.ts:267:5
TS2717: Subsequent property declarations must have the same type.  Property '$toast' must be of type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }', but here has type '{ (content: ToastContent, options?: ToastOptions | undefined): ToastID; clear(): any; updateDefaults(update: PluginOptions): void; ... 5 more ...; warning(content: ToastContent, options?: (ToastOptions & { ...; }) | undefined): ToastID; }'.
    265 | declare module "vuex/types/index" {
    266 |   interface Store<S> {
  > 267 |     $toast: ReturnType<typeof ToastInterface>;
        |     ^^^^^^
    268 |   }
    269 | }
    270 |

Expected behavior

yarn generate should complete without any errors.

Steps to reproduce

Steps:

1. Set up project with Nuxt, Typescript, Nuxt Composition API
2. Use the provider in a component and then use the toast in a child component
3. run yarn generate

Your Environment

• Device: PC
• OS: Windows 10, Ubuntu 20 (problem exists in both OS)

[NotHolst]

I too experience this problem

[Jhomalex]

I too have the same problem.
I can't solve, but I have be able to use this module deleting 'vue-toastnotification/nuxt' from tsconfig.json

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[Maronato]

Hey y'all!

I fixed the issue and also added a new export that makes it easier to use the composition API with nuxt.
Now, instead of having to provide to use composition while in nuxt, all you need to do is:

// MyComponent.vue
// Import from vue-toastification/composition/nuxt, not vue-toastification/composition
import { useToast } from "vue-toastification/composition/nuxt";

// Then, in the setup method
  setup() {
    const toast = useToast()
    // Use it like you would use this.$toast
  }

These changes will be added to the next release

[hisuwh]

@Maronato I get this issue importing useToast: import { useToast } from "vue-toastification/composition";

[p-runge]

I was using import { createToastInterface } from 'vue-toastification' instead of useToast and got the same issue.

I noticed I had vue-toastification/nuxt defined as a types dir in my tsconfig.json. After replacing it with vue-toastification it worked.

[mehrannaseri]

I was using import { createToastInterface } from 'vue-toastification' instead of useToast and got the same issue.

I noticed I had vue-toastification/nuxt defined as a types dir in my tsconfig.json. After replacing it with vue-toastification it worked.

This worked for me