VueJS default Layout not working

Hi, I am following this tutorial (https://www.youtube.com/watch?v=ndqDv92RfsI&list=PL3VM-unCzF8jeu0m8pSz6-Q9TwV74AbvW&index=14&ab_channel=Laracasts) and for some strange reason it is not working, I should mention that I had trouble before with the keyword require, and did read somewhere that vite has trouble with it, but don't count on these words.

import { createApp, h } from 'vue'
import { InertiaProgress } from '@inertiajs/progress'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import Layout from "./Shared/Layout.vue"

InertiaProgress.init({
  
    // The color of the progress bar.
    color: '#FE6D73',
  
    // Whether to include the default NProgress styles.
    includeCSS: true,
  
    // Whether the NProgress spinner will be shown.
    showSpinner: true,
  })

createInertiaApp({
    resolve: name => {
        let page = require(`./Pages/${name}`).default;
        page.layout = Layout;
        return page;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

<template>
    <h1 class="text-2xl">
        Home!
    </h1>
</template>