[Vuejs]-Uncaught (in promise) TypeError: this.resolveComponent is not a function | Inertia, Django & Vue

by

0👍

I figured out the problem. This is actually due to a difference between these two packages:

@inertiajs/vue3
@inertiajs/inertia-vue3

Honestly very confusing. Make sure you use the NEW variant. The latter hasn’t been updated in over 2 years.

Use: @inertiajs/vue3

In my case I was using the old one in my main.ts, which caused the error. So I updated it with the following config (for those wondering):

import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';

const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });

createInertiaApp({
  resolve: (name: string) => {
    const pageImport = pages[`./Pages/${name}.vue`];
    if (!pageImport) throw new Error(`Component "${name}" not found`);
    return pageImport as any; // Explicit type assertion
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Hope this helps! Cheers.

Leave a comment