Type error TS2322(`resolvePageComponent` + `vite`'s `import.meta.glob`)

• Laravel Vite Plugin Version: 0.6.1
• Laravel Version: 9.39.0
• Node Version: 16.17.0
• NPM Version: 8.19.1
• Host operating system: Ubuntu22.04(Laravel Sail 8.1) on Docker on Ubuntu20.04(WSL2)
• Web Browser & Version: no relation
• Running in Sail / Docker: Sail

Description:

I consulted on Discord about an issue #161 I created earlier, and got a reply saying it might be a bug, so I created this new one.

I think the cause of the error is that the type of the second arg of resolvePageComponent of laravel-vite-plugin and the return type of import.meta.glob of vite do not match. Because if I use import.meta.globEager instead of import.meta.glob I get no error. (Unfortunately using import.meta.globEager causes no code-splitting for the pages, so this is not a workaround)

Currently I avoid type errors by calling resolvePageComponent on the javascript file, but hopefully the laravel-vite-plugin will fix it. Thank you.

// laravel-vite-plugin/inertia-helpers/index.d.ts
export declare function resolvePageComponent<T>(path: string, pages: Record<string, Promise<T> | (() => Promise<T>)>): Promise<T>;

// vite/types/importGlob.d.ts
// https://github.com/vitejs/vite/blob/v3.2.4/packages/vite/types/importGlob.d.ts#L39

・・・

export interface ImportGlobFunction {
  /**
   * Import a list of files with a glob pattern.
   *
   * Overload 1: No generic provided, infer the type from `eager` and `as`
   */
  <
    Eager extends boolean,
    As extends string,
    T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown
  >(
    glob: string | string[],
    options?: ImportGlobOptions<Eager, As>
  ): (Eager extends true ? true : false) extends true
    ? Record<string, T>
    : Record<string, () => Promise<T>>
  /**
   * Import a list of files with a glob pattern.
   *
   * Overload 2: Module generic provided, infer the type from `eager: false`
   */
  <M>(
    glob: string | string[],
    options?: ImportGlobOptions<false, string>
  ): Record<string, () => Promise<M>>
  /**
   * Import a list of files with a glob pattern.
   *
   * Overload 3: Module generic provided, infer the type from `eager: true`
   */
  <M>(
    glob: string | string[],
    options: ImportGlobOptions<true, string>
  ): Record<string, M>
}

・・・

Steps To Reproduce:

See #161.

[HaneulChile]

@HaneulChile Hi. In the inertia-react type definition, options.resolve passed to createInertiaApp is described as follows.

// node_modules/@inertiajs/inertia-react/index.d.ts

・・・

export type ReactComponent = React.ReactNode;

export type PageResolver = (name: string) => ReactComponent|Promise<ReactComponent>|NodeRequire // TODO: When shipped, replace with: Inertia.PageResolver<ReactComponent>

・・・

export type BaseInertiaAppOptions = {
    title?: HeadManagerTitleCallback,
    resolve: PageResolver,
}

・・・

export type InertiaAppOptionsForSSR<SharedProps> = BaseInertiaAppOptions & {
    id?: undefined,
    page: Inertia.Page|string,
    render: typeof renderToString,
    setup(options: SetupOptions<null, SharedProps>): ReactInstance
}

export function createInertiaApp<SharedProps = Inertia.PageProps>(options: InertiaAppOptionsForCSR<SharedProps>): Promise<CreateInertiaAppSetupReturnType>
export function createInertiaApp<SharedProps = Inertia.PageProps>(options: InertiaAppOptionsForSSR<SharedProps>): Promise<CreateInertiaAppSSRContent>

・・・

And the PageResolver is a Promise that returns a ReactComponent or a ReactComponent itself , which is also defined in inertia-react. So if you use React, I’m not familiar with React so I haven’t been able to try it, but I guess you can solve it by using ReactComponent. (Like Vue3’s DefineComponent) Like this:

// app.ts

・・・

// import ReactComponent type
import { createInertiaApp, type ReactComponent } from '@inertiajs/inertia-react';

・・・

createInertiaApp({

・・・

    // specify the ReactComponent type to import.meta.glob
    resolve: name => resolvePageComponent(`../ts/Pages/${ name }.tsx`, import.meta.glob<ReactComponent>('../ts/Pages/**/*.tsx')),

・・・

});

Please try it if you don’t mind. If you get good results, it would be helpful for everyone if you could let us know here.

Worked perfect!!!. Thanks so much.

[timacdonald]

Laravel does not officially support Typescript, so we won’t document that.

If you feel there is an improvement to be made, we would welcome a PR to improve the types.