Open mxmtsk opened 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:
Modal
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.
usePage
I'm using the following package versions:
"momentum-modal-react": "^1.0.0", "@inertiajs/react": "^1.0.15",
Am I missing something here?
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:My Base Layout looks pretty straightforward:
And I call the layout pretty standard:
My entry file also looks pretty standard:
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:
Am I missing something here?