fix(react-router): improve error handling for module loading failures in lazyRouteComponent (#3262)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Sheraff

packages/react-router/src/lazyRouteComponent.tsx

@@ -8,9 +8,14 @@ import type { AsyncRouteComponent } from './route'
 // URL to the lazy module.
 // In that case, we want to attempt one window refresh to get the latest.
 function isModuleNotFoundError(error: any): boolean {
+  // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // safari: "Importing a module script failed."
+  if (typeof error?.message !== 'string') return false
   return (
-    typeof error?.message === 'string' &&
-    /Failed to fetch dynamically imported module/.test(error.message)
+    error.message.startsWith('Failed to fetch dynamically imported module') ||
+    error.message.startsWith('error loading dynamically imported module') ||
+    error.message.startsWith('Importing a module script failed')
   )
 }
 
@@ -46,6 +51,7 @@ export function lazyRouteComponent<
   let loadPromise: Promise<any> | undefined
   let comp: T[TKey] | T['default']
   let error: any
+  let reload: boolean
 
   const load = () => {
     if (typeof document === 'undefined' && ssr?.() === false) {
@@ -59,7 +65,27 @@ export function lazyRouteComponent<
           comp = res[exportName ?? 'default']
         })
         .catch((err) => {
+          // We don't want an error thrown from preload in this case, because
+          // there's nothing we want to do about module not found during preload.
+          // Record the error, the rest is handled during the render path.
           error = err
+          if (isModuleNotFoundError(error)) {
+            if (
+              error instanceof Error &&
+              typeof window !== 'undefined' &&
+              typeof sessionStorage !== 'undefined'
+            ) {
+              // Again, we want to reload one time on module not found error and not enter
+              // a reload loop if there is some other issue besides an old deploy.
+              // That's why we store our reload attempt in sessionStorage.
+              // Use error.message as key because it contains the module path that failed.
+              const storageKey = `tanstack_router_reload:${error.message}`
+              if (!sessionStorage.getItem(storageKey)) {
+                sessionStorage.setItem(storageKey, '1')
+                reload = true
+              }
+            }
+          }
         })
     }
 
@@ -68,36 +94,13 @@ export function lazyRouteComponent<
 
   const lazyComp = function Lazy(props: any) {
     // Now that we're out of preload and into actual render path,
-    // throw the error if it was a module not found error during preload
+    if (reload) {
+      // If it was a module loading error,
+      // throw eternal suspense while we wait for window to reload
+      window.location.reload()
+      throw new Promise(() => {})
+    }
     if (error) {
-      if (isModuleNotFoundError(error)) {
-        // We don't want an error thrown from preload in this case, because
-        // there's nothing we want to do about module not found during preload.
-        // Record the error, recover the promise with a null return,
-        // and we will attempt module not found resolution during the render path.
-
-        if (
-          error instanceof Error &&
-          typeof window !== 'undefined' &&
-          typeof sessionStorage !== 'undefined'
-        ) {
-          // Again, we want to reload one time on module not found error and not enter
-          // a reload loop if there is some other issue besides an old deploy.
-          // That's why we store our reload attempt in sessionStorage.
-          // Use error.message as key because it contains the module path that failed.
-          const storageKey = `tanstack_router_reload:${error.message}`
-          if (!sessionStorage.getItem(storageKey)) {
-            sessionStorage.setItem(storageKey, '1')
-            window.location.reload()
-
-            // Return empty component while we wait for window to reload
-            return {
-              default: () => null,
-            }
-          }
-        }
-      }
-
       // Otherwise, just throw the error
       throw error
     }