Typescript bug when using with vue-final-modal

[mrleblanc101]

@inertiajs/vue3 Version

2.2.15

Backend stack (optional)

Laravel v12.31.1
PHP 8.2

Describe the problem

Hey,

I'm not sure if the issue is with Vue-final-modal or Inertia.js, but I've already opened an issue in the vue-final-modal repo (vue-final/vue-final-modal#472).

I'm observing a very strange behavior with Types when I import vue-final-modal inside an Inertia.js app (using Vue.js). As soon as I import anything from vue-final-modal, some global types seem to stop working.

For example, in Inertia you can access $page, $inertia and route() globally in the templates, but with vue-final-modal imported I get errors in VS Code.

Property '$page' does not exist on type '{ Link: InertiaLink; AvatarImage: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., any>; ... 22 more ...; $vfm: Vfm; }'.ts-plugin(2339)

Property '$inertia' does not exist on type '{ Link: InertiaLink; Multiselect: typeof Multiselect; OnClickOutside: DefineSetupFnComponent<OnClickOutsideProps, OnClickOutsideEmits, {}, OnClickOutsideProps & { ...; }, PublicProps>; ... 27 more ...; $vfm: Vfm; }'.ts-plugin(2339)

Property 'route' does not exist on type '{ Link: InertiaLink; Multiselect: typeof Multiselect; OnClickOutside: DefineSetupFnComponent<OnClickOutsideProps, OnClickOutsideEmits, {}, OnClickOutsideProps & { ...; }, PublicProps>; ... 27 more ...; $vfm: Vfm; }'.ts-plugin(2339)

If I remove any vue-final-modal imports, everything is back to normal:

Here are the types, pretty much unchanged from the Laravel https://github.com/laravel/vue-starter-kit, which is what their CLI use to scafold a new Inertia.js (using Vue.js) project.

import { route } from 'ziggy-js';

declare module '@inertiajs/core' {
    interface PageProps extends InertiaPageProps, AppPageProps {}
}

declare module 'vue' {
    interface ComponentCustomProperties {
        $inertia: typeof Router;
        $page: Page;
        $headManager: ReturnType<typeof createHeadManager>;
    }
}

export type AppPageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
    auth: Auth;
    ziggy: Config & { location: string };
    subsidiaries: Subsidiary[];
    subsidiary: Subsidiary;
    version: {
        commitTag: string;
        commitShortSha: string;
    };
};

declare global {
    let route: typeof route;
}

declare module 'vue' {
    interface ComponentCustomProperties {
        route: typeof route;
    }
}

Steps to reproduce

Add import { createVfm } from 'vue-final-modal' at the end of the import list inside app.ts

See: vue-final/vue-final-modal#472

[mrleblanc101]

Wait, could it be related to the import order ? :O

This works:

import { createVfm } from 'vue-final-modal';
import { createInertiaApp } from '@inertiajs/vue3';

This gives error:

import { createInertiaApp } from '@inertiajs/vue3';
import { createVfm } from 'vue-final-modal';

But ESLint / Prettier are sorting the import in alphabetical order or something...

[mrleblanc101]

You can fin a reproduction inside the linked issue

[pascalbaljet]

Isn't there a problem with declaring the ComponentCustomProperties twice in your globals.d.ts? The mentioned package also seems to declare that interface; maybe you need to include their definition as well?

https://github.com/vue-final/vue-final-modal/blob/be7430cf843964e6ba3307201be6882482d9b595/packages/vue-final-modal/src/index.ts#L27

[mrleblanc101]

@pascalbaljet What do you mean ? It should merge them, not overwrite them, no ?
How else are multiple plugin suppose to add to ComponentCustomProperties ?
Also why would changing the order fix the problem ? Doesn't seem to create new ones

[mrleblanc101]

@pascalbaljet TheComponentCustomProperties appearing twice comes from laravel/vue-starter-kit, which is the official Inertia.js Laravel integration, not from my code.

The starter-kit has changed a little since I started this project, so here are the direct link to the files:
Here: https://github.com/laravel/vue-starter-kit/blob/da476dbd0e4e520f632ad0bfce1fc1c27d308a84/resources/js/types/globals.d.ts
And here: https://github.com/laravel/vue-starter-kit/blob/da476dbd0e4e520f632ad0bfce1fc1c27d308a84/resources/js/types/ziggy.d.ts

[pascalbaljet]

@pascalbaljet What do you mean ?

In the example in your first post, you have two blocks of:

declare module 'vue' {
    interface ComponentCustomProperties {   
    }
}

Maybe you should just merge them and use the Vfm type.

import type { Vfm } from 'vue-final-modal'

declare module 'vue' {
    interface ComponentCustomProperties {
        $inertia: typeof Router;
        $page: Page;
        $headManager: ReturnType<typeof createHeadManager>;
        route: typeof route;
        $vfm: Vfm;
    }
}

[mrleblanc101]

Ok, let's recap.
There are 3 declare module 'vue', not 2.

The first declare module 'vue' is for Inertia props.
The second is for Ziggy-vue, which the laravel/vue-starter-kit used, they switched to wayfinder recently.
I know they can be merged, but that's 100% not the issue.

The third declare module 'vue' comes from the plugin vue-final-modal.
It's NOT inside my code... So I can't merge it.
But the number of declare module 'vue' is not a problem.
Why would it work with 2, but not 3 ?
And why would the order of the import fix the problem ?

[pascalbaljet]

I meant merging in your project in globals.d.ts, like the code example I provided.

[mrleblanc101]

Again, that's not a real fix, just a workaround.
I already provided a working workaround here.
But the package import order, should in now way affect the types !

There is clearly a bug with Inertia.js or vue-final-modal (or even TypeScript 🤔).
The types are automatically discovered when I import the packages, I shouldn't have to import the types separately...
I don't have this issue in a Nuxt project where I use the same package.

[pascalbaljet]

Looking at the Vue documentation, Inertia's TypeScript module augmentation implementation seems correct. I've also tried the laravel-vue-i18n library (which has similar type declarations) in combination with Laravel's Vue Starter Kit and that seems to work fine.

Looks like a TypeScript/Vue issue (maybe with the vue-final-modal library) rather than a bug in Inertia, so I'll convert this to a discussion.

[mrleblanc101]

And vue-final-modal seem to augment Vue types correctly too, that's what I don't understand 🤷‍♂️
Also, I don't have this issue in a Nuxt project. I can still using globals like $t, but how vue-final-modal is imported in a slightly different way since the createVueApp is abstracted in Nuxt, and vue-final-modal is registered inside a module like so :

import { createVfm, type Vfm } from 'vue-final-modal';

export default defineNuxtPlugin((nuxtApp) => {
    const vfm = createVfm() as Vfm;
    const { openedModals } = vfm;

    watch(openedModals, (opened) => {
        if (opened.length) {
            document.documentElement.classList.add('has-modal');
        } else {
            document.documentElement.classList.remove('has-modal');
        }
    });

    nuxtApp.vueApp.use(vfm);
});