Eager loading in Layouts not working

[danteese]

I'm working in a project that involves using Layouts between different pages as shown the following code (this works ok):

const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true})
let page = pages[`./Pages/${name}.jsx`]
page.default.layout = page.default.layout || <Layout children={page} />
return page;

The problem is when I want to enable the dynamic import like this documentation and I need to change my code a bit but then the Layouts didn't work anymore.

With some research mainly in forums I finished with this code:

// Disabled eager 
createInertiaApp({
    id: 'app',
    resolve: async name => {
        return await resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx',)
        );
    },
    setup({el, App, props}) {
        createRoot(el).render(<App {...props} />)
    }
})

And in my pages I needed to do this, because the page.default.layout = <Layout children={page} /> didn't work:

Component.layout = page => <Layout children={page}>

So my question is: is there a way to work with dynamic/lazy imports to include the Layout? in the research it seems obvious with the code examples but is not working for me...

[hariupreti]

Additionally, I invested several hours in configuring various layouts according to the Pages directory name. This was a similar problem. The page.default.layout was missing when I attempted to establish the page's default layout. Here is the code that I find to be effective:

import "./bootstrap";
import "../css/app.css";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import Guest from "./Layouts/GuestLayout";
import Authenticated from "./Layouts/AuthenticatedLayout";
import PlainLayout from "./Layouts/PlainLayout";
import { ReactElement } from "react";

const appName = import.meta.env.VITE_APP_NAME || "Motivation";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.tsx", { eager: true });
        let page: any = pages[`./Pages/${name}.tsx`];
        if (!page) {
            throw new Error(`Page not found: ${name}`);
        }
        if (name.startsWith("Authenticated")) {
            page.default.layout =
                page.default.layout ||
                ((page: ReactElement) => (
                    <Authenticated
                        props={page.props}
                        children={page}
                    />
                ));
        } else if (name.startsWith("Business")) {
            page.default.layout =
                page.default.layout ||
                ((page: ReactElement) => <PlainLayout children={page} />);
        } else {
            page.default.layout = page.default.layout ||
                ((page: ReactElement) => (
                    <Guest props={page.props} children={page} />
                ));
        }
        return page;
    },
    setup({ el, App, props }) {
        const root = createRoot(el);
        root.render(<App {...props} />);
    },
    progress: {
        color: "#5bf581",
    },
});