Adding typescript gives a error with resolvePageComponent

[ingLomeland]

Version:

• @inertiajs/vue3 version: 0.6.0

Describe the problem:

I started a fresh project today with the latest laravel. Installed Inertia via npm and set up app.js. When I added typescript I get this red squigly error in app.ts. The app works though.

My tsconfig.json file looks like this

{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "allowJs": true, "paths": { "@/*": ["./resources/js/*"] }, "types": [ "vite/client", ], }, "include": [ "resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts", "resources/js/**/*.vue", ] }

Steps to reproduce:

Start a new project with Laravel + Vue + Vite + Typescript

[lepikhinb]

You can cast the resolvePageComponent return type as Promise<DefineComponent> and you'll be good.

import { createApp, h, DefineComponent } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"

createInertiaApp({
  resolve: (name: string) =>
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    ) as Promise<DefineComponent>,
})

[ingLomeland]

Thanks, I'll try it out. Would be nice to add a section about typescript in the inertia docs and examples😀 And since vite is the default in laravel now, it would also be good to have some examples with that setup

[bram-pkg]

Would be nice if the return type for resolvePageComponent could be amended, yes.

That being said, adding the as Promise<DefineComponent> fixed it for now, but this is ofcourse a temporary solution.

[jessarcher]

I'm not sure what we can do with the return type of resolvePageComponent which is already a generic. The return type of import.meta.glob() is Record<string, () => Promise<unknown>> because it can import a lot more than just Vue components.

An alternative might be to do something like this (untested):

import { createApp, h, DefineComponent } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"

createInertiaApp({
  resolve: (name: string) =>
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue") as Record<string, () => Promise<DefineComponent>>
    ),
})

Assuming this works, the benefit is that it casts the unknown as early as possible.

[lepikhinb]

@jessarcher import.meta.glob is a generic, so the alternative would be:

import { createApp, h, DefineComponent } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"

createInertiaApp({
  resolve: (name: string) =>
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob<DefineComponent>("./Pages/**/*.vue")
    )
})

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️