Errors when building with TypeScript - No overload matches this call

[peterbrinck]

Hi! 👋

I kept getting some errors (No overload matches this call. / Type 'ObjectPlugin<any[]>' is not assignable to type 'Plugin') when building my application with TypeScript

It seems that Vue excepts the plugin to be the type ObjectPlugin but i18nVue is type Plugin
I'm not that strong in TypeScript, so I don't have a clear idea if it's on purpose or anything, but I managed to fix it by casting the plugin as an ObjectPlugin

My fix:

.use(<ObjectPlugin>i18nVue, {
  resolve: async (lang: string) => {
    const langs = import.meta.glob('../../lang/*.json');
    return <Promise<LanguageJsonFileInterface>>await langs[`../../lang/${lang}.json`]()
  }
})

Error output from the build command:

bun run build
$ vue-tsc && vite build
resources/js/app.ts:39:12 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(plugin: Plugin<[{ resolve: (lang: string) => Promise<unknown>; }]>, options_0: { resolve: (lang: string) => Promise<unknown>; }): App<Element>', gave the following error.
    Argument of type 'Plugin' is not assignable to parameter of type 'Plugin<[{ resolve: (lang: string) => Promise<unknown>; }]>'.
      Type 'ObjectPlugin<any[]>' is not assignable to type 'Plugin<[{ resolve: (lang: string) => Promise<unknown>; }]>'.
        Type 'ObjectPlugin<any[]>' is not assignable to type 'FunctionPlugin<[{ resolve: (lang: string) => Promise<unknown>; }]>'.
          Type 'ObjectPlugin<any[]>' is not assignable to type '(app: App<any>, options_0: { resolve: (lang: string) => Promise<unknown>; }) => any'.
            Type 'ObjectPlugin<any[]>' provides no match for the signature '(app: App<any>, options_0: { resolve: (lang: string) => Promise<unknown>; }): any'.
  Overload 2 of 2, '(plugin: Plugin<{ resolve: (lang: string) => Promise<unknown>; }>, options: { resolve: (lang: string) => Promise<unknown>; }): App<Element>', gave the following error.
    Argument of type 'Plugin' is not assignable to parameter of type 'Plugin<{ resolve: (lang: string) => Promise<unknown>; }>'.
      Type 'ObjectPlugin<any[]>' is not assignable to type 'Plugin<{ resolve: (lang: string) => Promise<unknown>; }>'.
        Type 'ObjectPlugin<any[]>' is not assignable to type 'FunctionPlugin<{ resolve: (lang: string) => Promise<unknown>; }>'.
          Type 'ObjectPlugin<any[]>' is not assignable to type '(app: App<any>, options: { resolve: (lang: string) => Promise<unknown>; }) => any'.
            Type 'ObjectPlugin<any[]>' provides no match for the signature '(app: App<any>, options: { resolve: (lang: string) => Promise<unknown>; }): any'.

39       .use(i18nVue, {
              ~~~~~~~

Found 1 error in resources/js/app.ts:39

[xiCO2k]

Thanks for this one, if anyone wants to make a PR for this one I appreciate it!

[yangfancn]

My fix:

import { i18nVue } from "laravel-vue-i18n"

...
.use(i18nVue as any, {
        resolve: async (lang: string) => {
          const langFiles = import.meta.glob('../../../lang/*.json');
          return await langFiles[`../../../lang/${lang}.json`]()
        }
      })
.mount(el)