Wait for Inertia router to be initialized

demo-app/database/seeders/DatabaseSeeder.php

@@ -19,7 +19,7 @@ public function run(): void
 
         UserFactory::new()
             ->recycle(Role::all())
-            ->count(200)
+            ->count(20)
             ->create();
     }
 }

react/src/ModalRoot.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { default as Axios } from 'axios'
-import { except, only } from './helpers'
+import { except, only, resolveInteriaPageFromRouter } from './helpers'
 import { router } from '@inertiajs/react'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
 import { createContext, useContext } from 'react'
@@ -205,27 +205,29 @@ export const ModalStackProvider = ({ children }) => {
 
             const [url, data] = mergeDataIntoQueryString(method, href || '', payload, queryStringArrayFormat)
 
-            Axios({
-                url,
-                method,
-                data,
-                headers: {
-                    ...headers,
-                    Accept: 'text/html, application/xhtml+xml',
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-Inertia': true,
-                    'X-Inertia-Version': router.page.version,
-                    'X-InertiaUI-Modal': true,
-                },
-            })
-                .then((response) => {
-                    router.resolveComponent(response.data.component).then((component) => {
-                        resolve(push(component, response.data, modalProps, onClose, onAfterLeave))
-                    })
-                })
-                .catch((error) => {
-                    reject(error)
+            resolveInteriaPageFromRouter().then((inertiaPage) => {
+                Axios({
+                    url,
+                    method,
+                    data,
+                    headers: {
+                        ...headers,
+                        Accept: 'text/html, application/xhtml+xml',
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-Inertia': true,
+                        'X-Inertia-Version': inertiaPage.version,
+                        'X-InertiaUI-Modal': true,
+                    },
                 })
+                    .then((response) => {
+                        router.resolveComponent(response.data.component).then((component) => {
+                            resolve(push(component, response.data, modalProps, onClose, onAfterLeave))
+                        })
+                    })
+                    .catch((error) => {
+                        reject(error)
+                    })
+            })
         })
     }
 

react/src/helpers.js

@@ -1,3 +1,36 @@
+import { router } from '@inertiajs/react'
 import { except, only, rejectNullValues } from './../../vue/src/helpers.js'
 
-export { except, only, rejectNullValues }
+/**
+ * Resolves router.page from the Inertia router or waits for it to be available
+ */
+function resolveInteriaPageFromRouter(waitForSeconds = 3, checkIntervalMilliseconds = 100) {
+    const resolvePage = () => router.page || null
+
+    return new Promise((resolve, reject) => {
+        let page = resolvePage()
+
+        if (page) {
+            resolve(page)
+            return
+        }
+
+        let maxAttempts = (waitForSeconds * 1000) / checkIntervalMilliseconds
+
+        const interval = setInterval(() => {
+            page = resolvePage()
+
+            if (page) {
+                clearInterval(interval)
+                resolve(page)
+            }
+
+            if (--maxAttempts <= 0) {
+                clearInterval(interval)
+                reject(new Error('Inertia page not available'))
+            }
+        }, checkIntervalMilliseconds)
+    })
+}
+
+export { except, only, rejectNullValues, resolveInteriaPageFromRouter }