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

Question

I have just setup Intertia with Vue and laravel and I can't seem to get the pages to load I am having this error

Here is the setup

app.js

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

createInertiaApp({
  resolve: async (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue')

    return (await pages[`./Pages/${name}.vue`]())
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

IndexController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function index()
    {
        return inertia('Index/Index');
    }
    public function show(){
        return inertia('Index/Show');
    }
}

web.php

Route::get('/', [IndexController::class, 'index']);
Route::get('/show', [IndexController::class, 'show']);

here is just some basic vue template Index.vue

<template>
    <div>index</div>
</template>

I expect for the index.vue to be displayed just showing the simple text index

Answer 1

Solved the issue was having the Pages folder in the wrong folder The pages folder should be in resources/js/Pages. My mistake was having the pages folder in resources/js

Answer 2

For me, it was writing .vue in my path:

return Inertia::render('Dashboard/Admin/Home.vue'); // wrong

I removed .vue and problem solved

return Inertia::render('Dashboard/Admin/Home'); // correct