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

The error you're encountering, Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default'), typically occurs when the module you're trying to import does not have a default export. This can happen if the module is using named exports instead.

Here are a few steps to troubleshoot and resolve this issue:

1. Check the Exports in Your Vue Components: Ensure that your Vue components are using default exports. For example:

   // resources/assets/js/Pages/Campaigns/EditCategories.vue
   export default {
       // component options
   }
   

2. Update the resolvePageComponent Function: The resolvePageComponent function should correctly handle the dynamic imports. Ensure that it correctly resolves the component and handles the default export. Here’s an updated version of your createInertiaApp setup:

   import { createApp, h } from 'vue';
   import { createInertiaApp, InertiaProgress } from '@inertiajs/vue3';
   import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
   
   InertiaProgress.init();
   
   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);
       },
   });
   

3. Ensure Correct File Paths: Verify that the paths you are using in import.meta.glob are correct and match the actual file structure. For example, if your files are located in Modules/Admin/resources/assets/js/Pages/Campaigns, you should use:

   import.meta.glob('./Modules/Admin/resources/assets/js/Pages/Campaigns/**/*.vue')
   

4. Check for Typos and Case Sensitivity: Ensure there are no typos in your file paths and that the case sensitivity matches exactly with your file system.

5. Debugging: Add some console logs to debug the resolved paths and ensure they are correct:

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

By following these steps, you should be able to resolve the issue with the dynamic imports and ensure that your Vue components are correctly loaded.