fix: restore Inertia rendering in development

resources/js/app.tsx

@@ -24,11 +24,11 @@ createInertiaApp({
         }
     },
     strictMode: true,
-    withApp(app) {
+    withApp(app, { page }) {
         return (
             <TooltipProvider delayDuration={0}>
                 {app}
-                <FlashMessages />
+                <FlashMessages flash={page.props.flash} />
                 <Toaster />
             </TooltipProvider>
         );

resources/js/components/flash-messages.tsx

@@ -1,19 +1,23 @@
-import { usePage } from '@inertiajs/react';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
 
-export function FlashMessages() {
-    const { flash } = usePage().props;
+type FlashMessagesProps = {
+    flash?: {
+        success?: string | null;
+        error?: string | null;
+    };
+};
 
+export function FlashMessages({ flash }: FlashMessagesProps) {
     useEffect(() => {
-        if (flash.success) {
+        if (flash?.success) {
             toast.success(flash.success);
         }
 
-        if (flash.error) {
+        if (flash?.error) {
             toast.error(flash.error);
         }
-    }, [flash.error, flash.success]);
+    }, [flash?.error, flash?.success]);
 
     return null;
 }

resources/js/types/global.d.ts

@@ -12,7 +12,10 @@ declare module '@inertiajs/core' {
         sharedPageProps: {
             name: string;
             auth: Auth;
-            flash: { success?: string; error?: string };
+            flash: {
+                success?: string | null;
+                error?: string | null;
+            };
             sidebarOpen: boolean;
             [key: string]: unknown;
         };