Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')

[TerrePorter]

I am using Laravel 11, (Vite), Vue 3, inertia-laravel v1.3 and I am getting an error that I have not been able to trace down completely.

I am getting the following error.

# firefox
Uncaught (in promise) TypeError: g is undefined
    c http://rc.lan/build-admin/assets/app-edit-categories-M4L2IjoB.js:7330
    promise callback*c http://rc.lan/build-admin/assets/app-edit-categories-M4L2IjoB.js:7330
    Jm http://rc.lan/build-admin/assets/app-edit-categories-M4L2IjoB.js:7330
    <anonymous> http://rc.lan/build-admin/assets/app-edit-categories-M4L2IjoB.js:7354
app-edit-categories-M4L2IjoB.js:7330:50

#chrome
app-edit-categories-M4L2IjoB.js:7330 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')
    at app-edit-categories-M4L2IjoB.js:7330:52
    at async Jm (app-edit-categories-M4L2IjoB.js:7330:79)
(anonymous) @ app-edit-categories-M4L2IjoB.js:7330
await in (anonymous) (async)
(anonymous) @ app-edit-categories-M4L2IjoB.js:7354

Both refer to the same block of code,

g => g.default || g

// I couldn’t tell you were this comes from is was built when using vite.

async function Jm({id: e = "app", resolve: t, setup: r, title: n, progress: i = {}, page: o, render: a}) {
    let l = typeof window > "u", u = l ? null : document.getElementById(e), p = o || JSON.parse(u.dataset.page),
        c = _ => Promise.resolve(t(_)).then(g => g.default || g), y = [], m = await c(p.component).then(_ => r({…

I think it has to do with the code in my app-edit-categories.js and the pathing because I have the vue pages in a subdirectory and all i ever see is templates in Pages.

import { createApp, h } from 'vue'
import { createInertiaApp, InertiaProgress } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
InertiaProgress.init()
createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/Campaigns/${name}.vue`, import.meta.glob('./Pages/Campaigns/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

I also tried this version,

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

createInertiaApp({
    resolve: async (name) => {
        const pages = import.meta.glob('./Pages/Categories/**/*.vue');
        return (await pages[`./Pages/Categories/${name}.vue`]())
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

My file structure is as follows:

resources/assets/js/Pages/Campaigns/EditCategories.vue
resources/assets/js/app-edit-categories.js

I'm assuming the path is relative this is not the base level resources path, full path would be Modules/Admin/resources/assets/Pages/Campaigns/EditCategories.vue.

Can anyone assist me?

[TerrePorter]

fixed it with the following update,

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


createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob('./Pages/Campaigns/**/*.vue');
        const importPage = pages[`./Pages/Campaigns/${name}.vue`];
        if (!importPage) {
            throw new Error(`Page not found: ${name}`);
        }
        return importPage().then(module => module.default || module);
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

and then in my routes file

    Route::middleware(HandleInertiaRequests::class)
        ->get('campaigns/edit_categories_vue/{category_id}', function ($category_id) {
            return Inertia::render('EditCategories', [
                'category_id' => $category_id,
                'errors' => [],
                'url' => '/admin/campaigns/edit_categories_vue/2',
            ]);

    })->name('test');