josemariagomez / momentum-modal-react

MIT License
7 stars 2 forks source link

Uncaught Error: usePage must be used within the Inertia component #2

Open mxmtsk opened 5 months ago

mxmtsk commented 5 months ago

I have a weird issue when I place the Modal component in my base layout as explained in the documentation. When I access any page I get a white screen and the following error:

Uncaught Error: usePage must be used within the Inertia component

My Base Layout looks pretty straightforward:

const Base: React.FC<React.PropsWithChildren> = ({ children }) => {
    const { props } = usePage<GlobalProps>();

    React.useEffect(() => {
        if (props.flash) {
            if (props.flash.status) {
                toast(props.flash.status, {
                    description: props.flash.message ?? undefined,
                });
            } else if (props.flash.error) {
                toast(props.flash.error);
            }
        }
    }, [props.status]);

    return (
        <div className="flex min-h-screen w-full flex-col bg-muted/40">
            {children}
            <Toaster />
            <Modal />
        </div>
    );
};

And I call the layout pretty standard:

const TenantProfileEmails = () => { return (<div>my page...</div>); }
TenantProfileEmails.layout = (page) => (
    <Base>{page}</Base>
);

My entry file also looks pretty standard:

// @ts-expect-error
globalThis.resolveMomentumModal = (name: string) => {
    // @ts-expect-error
    const pages = import.meta.glob("./pages/**/*.tsx", { eager: true });
    return pages[`./pages/${name}.tsx`];
};

createInertiaApp({
    title: (title) => `${title} - Crew Hub`,
    resolve: (name) => {
        // @ts-expect-error
        const pages = import.meta.glob("./pages/**/*.tsx", { eager: true });
        return pages[`./pages/${name}.tsx`];
    },
    setup({ el, App, props }) {
        createRoot(el).render(
                    <ThemeProvider>
                        <App {...props} />
                    </ThemeProvider>
        );
    },
});

And accessing usePage in this component works perfectly fine, so I don't understand why it would throw an error in the Modal component itself.

I'm using the following package versions:

"momentum-modal-react": "^1.0.0",
"@inertiajs/react": "^1.0.15",

Am I missing something here?