diff --git a/packages/react-router/tests/errorComponent.test.tsx b/packages/react-router/tests/errorComponent.test.tsx
index 2c0062a9ac6..7835ca9e3a0 100644
--- a/packages/react-router/tests/errorComponent.test.tsx
+++ b/packages/react-router/tests/errorComponent.test.tsx
@@ -5,6 +5,7 @@ import {
   Link,
   RouterProvider,
   createBrowserHistory,
+  createLazyRoute,
   createRootRoute,
   createRoute,
   createRouter,
@@ -38,110 +39,135 @@ afterEach(() => {
   cleanup()
 })
 
-describe.each([{ preload: false }, { preload: 'intent' }] as const)(
-  'errorComponent is rendered when the preload=$preload',
-  (options) => {
-    describe.each([true, false])('with async=%s', (isAsync) => {
-      const throwableFn = isAsync ? asyncToThrowFn : throwFn
-
-      const callers = [
-        { caller: 'beforeLoad', testFn: throwableFn },
-        { caller: 'loader', testFn: throwableFn },
-      ]
-
-      test.each(callers)(
-        'an Error is thrown on navigate in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            component: function Home() {
-              return (
-                <div>
-                  <Link to="/about">link to about</Link>
-                </div>
+describe.each([true, false])(
+  'with lazy errorComponent=%s',
+  (isUsingLazyError) => {
+    describe.each([{ preload: false }, { preload: 'intent' }] as const)(
+      'errorComponent is rendered when the preload=$preload',
+      (options) => {
+        describe.each([true, false])('with async=%s', (isAsync) => {
+          const throwableFn = isAsync ? asyncToThrowFn : throwFn
+
+          const callers = [
+            { caller: 'beforeLoad', testFn: throwableFn },
+            { caller: 'loader', testFn: throwableFn },
+          ]
+
+          test.each(callers)(
+            'an Error is thrown on navigate in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                component: function Home() {
+                  return (
+                    <div>
+                      <Link to="/about">link to about</Link>
+                    </div>
+                  )
+                },
+              })
+              const aboutRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/about',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>About route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                aboutRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/about')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+                history,
+              })
+
+              render(<RouterProvider router={router} />)
+
+              const linkToAbout = await screen.findByRole('link', {
+                name: 'link to about',
+              })
+
+              expect(linkToAbout).toBeInTheDocument()
+              fireEvent.mouseOver(linkToAbout)
+              fireEvent.focus(linkToAbout)
+              fireEvent.click(linkToAbout)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 1500 },
               )
+              await expect(
+                screen.findByText('About route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
             },
-          })
-          const aboutRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/about',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>About route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-            history,
-          })
-
-          render(<RouterProvider router={router} />)
-
-          const linkToAbout = await screen.findByRole('link', {
-            name: 'link to about',
-          })
-
-          expect(linkToAbout).toBeInTheDocument()
-          fireEvent.mouseOver(linkToAbout)
-          fireEvent.focus(linkToAbout)
-          fireEvent.click(linkToAbout)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 1500 },
           )
-          await expect(
-            screen.findByText('About route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-
-      test.each(callers)(
-        'an Error is thrown on first load in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>Index route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-            history,
-          })
 
-          render(<RouterProvider router={router} />)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 750 },
+          test.each(callers)(
+            'an Error is thrown on first load in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>Index route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                indexRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+                history,
+              })
+
+              render(<RouterProvider router={router} />)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 750 },
+              )
+              await expect(
+                screen.findByText('Index route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
+            },
           )
-          await expect(
-            screen.findByText('Index route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-    })
+        })
+      },
+    )
   },
 )
diff --git a/packages/solid-router/tests/errorComponent.test.tsx b/packages/solid-router/tests/errorComponent.test.tsx
index b9ccd941a61..4ee1abf3f1b 100644
--- a/packages/solid-router/tests/errorComponent.test.tsx
+++ b/packages/solid-router/tests/errorComponent.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, fireEvent, render, screen } from '@solidjs/testing-library'
 import {
   Link,
   RouterProvider,
+  createLazyRoute,
   createRootRoute,
   createRoute,
   createRouter,
@@ -29,108 +30,133 @@ afterEach(() => {
   cleanup()
 })
 
-describe.each([{ preload: false }, { preload: 'intent' }] as const)(
-  'errorComponent is rendered when the preload=$preload',
-  (options) => {
-    describe.each([true, false])('with async=%s', (isAsync) => {
-      const throwableFn = isAsync ? asyncToThrowFn : throwFn
-
-      const callers = [
-        { caller: 'beforeLoad', testFn: throwableFn },
-        { caller: 'loader', testFn: throwableFn },
-      ]
-
-      test.each(callers)(
-        'an Error is thrown on navigate in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            component: function Home() {
-              return (
-                <div>
-                  <Link to="/about">link to about</Link>
-                </div>
+describe.each([true, false])(
+  'with lazy errorComponent=%s',
+  (isUsingLazyError) => {
+    describe.each([{ preload: false }, { preload: 'intent' }] as const)(
+      'errorComponent is rendered when the preload=$preload',
+      (options) => {
+        describe.each([true, false])('with async=%s', (isAsync) => {
+          const throwableFn = isAsync ? asyncToThrowFn : throwFn
+
+          const callers = [
+            { caller: 'beforeLoad', testFn: throwableFn },
+            { caller: 'loader', testFn: throwableFn },
+          ]
+
+          test.each(callers)(
+            'an Error is thrown on navigate in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                component: function Home() {
+                  return (
+                    <div>
+                      <Link to="/about">link to about</Link>
+                    </div>
+                  )
+                },
+              })
+              const aboutRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/about',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>About route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                aboutRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/about')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+              })
+
+              render(() => <RouterProvider router={router} />)
+
+              const linkToAbout = await screen.findByRole('link', {
+                name: 'link to about',
+              })
+
+              expect(linkToAbout).toBeInTheDocument()
+              fireEvent.mouseOver(linkToAbout)
+              fireEvent.focus(linkToAbout)
+              fireEvent.click(linkToAbout)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 1500 },
               )
+              await expect(
+                screen.findByText('About route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
             },
-          })
-          const aboutRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/about',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>About route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-          })
-
-          render(() => <RouterProvider router={router} />)
-
-          const linkToAbout = await screen.findByRole('link', {
-            name: 'link to about',
-          })
-
-          expect(linkToAbout).toBeInTheDocument()
-          fireEvent.mouseOver(linkToAbout)
-          fireEvent.focus(linkToAbout)
-          fireEvent.click(linkToAbout)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 1500 },
           )
-          await expect(
-            screen.findByText('About route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-
-      test.each(callers)(
-        'an Error is thrown on first load in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>Index route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-          })
 
-          render(() => <RouterProvider router={router} />)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 750 },
+          test.each(callers)(
+            'an Error is thrown on first load in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>Index route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                indexRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+              })
+
+              render(() => <RouterProvider router={router} />)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 750 },
+              )
+              await expect(
+                screen.findByText('Index route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
+            },
           )
-          await expect(
-            screen.findByText('Index route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-    })
+        })
+      },
+    )
   },
 )
diff --git a/packages/vue-router/tests/errorComponent.test.tsx b/packages/vue-router/tests/errorComponent.test.tsx
index 91e7e47ec55..f606040f173 100644
--- a/packages/vue-router/tests/errorComponent.test.tsx
+++ b/packages/vue-router/tests/errorComponent.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/vue'
 import {
   Link,
   RouterProvider,
+  createLazyRoute,
   createRootRoute,
   createRoute,
   createRouter,
@@ -29,108 +30,133 @@ afterEach(() => {
   cleanup()
 })
 
-describe.each([{ preload: false }, { preload: 'intent' }] as const)(
-  'errorComponent is rendered when the preload=$preload',
-  (options) => {
-    describe.each([true, false])('with async=%s', (isAsync) => {
-      const throwableFn = isAsync ? asyncToThrowFn : throwFn
-
-      const callers = [
-        { caller: 'beforeLoad', testFn: throwableFn },
-        { caller: 'loader', testFn: throwableFn },
-      ]
-
-      test.each(callers)(
-        'an Error is thrown on navigate in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            component: function Home() {
-              return (
-                <div>
-                  <Link to="/about">link to about</Link>
-                </div>
+describe.each([true, false])(
+  'with lazy errorComponent=%s',
+  (isUsingLazyError) => {
+    describe.each([{ preload: false }, { preload: 'intent' }] as const)(
+      'errorComponent is rendered when the preload=$preload',
+      (options) => {
+        describe.each([true, false])('with async=%s', (isAsync) => {
+          const throwableFn = isAsync ? asyncToThrowFn : throwFn
+
+          const callers = [
+            { caller: 'beforeLoad', testFn: throwableFn },
+            { caller: 'loader', testFn: throwableFn },
+          ]
+
+          test.each(callers)(
+            'an Error is thrown on navigate in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                component: function Home() {
+                  return (
+                    <div>
+                      <Link to="/about">link to about</Link>
+                    </div>
+                  )
+                },
+              })
+              const aboutRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/about',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>About route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                aboutRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/about')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+              })
+
+              render(<RouterProvider router={router} />)
+
+              const linkToAbout = await screen.findByRole('link', {
+                name: 'link to about',
+              })
+
+              expect(linkToAbout).toBeInTheDocument()
+              fireEvent.mouseOver(linkToAbout)
+              fireEvent.focus(linkToAbout)
+              fireEvent.click(linkToAbout)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 1500 },
               )
+              await expect(
+                screen.findByText('About route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
             },
-          })
-          const aboutRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/about',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>About route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-          })
-
-          render(<RouterProvider router={router} />)
-
-          const linkToAbout = await screen.findByRole('link', {
-            name: 'link to about',
-          })
-
-          expect(linkToAbout).toBeInTheDocument()
-          fireEvent.mouseOver(linkToAbout)
-          fireEvent.focus(linkToAbout)
-          fireEvent.click(linkToAbout)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 1500 },
           )
-          await expect(
-            screen.findByText('About route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-
-      test.each(callers)(
-        'an Error is thrown on first load in the route $caller function',
-        async ({ caller, testFn }) => {
-          const rootRoute = createRootRoute()
-          const indexRoute = createRoute({
-            getParentRoute: () => rootRoute,
-            path: '/',
-            beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
-            loader: caller === 'loader' ? testFn : undefined,
-            component: function Home() {
-              return <div>Index route content</div>
-            },
-            errorComponent: MyErrorComponent,
-          })
-
-          const routeTree = rootRoute.addChildren([indexRoute])
-
-          const router = createRouter({
-            routeTree,
-            defaultPreload: options.preload,
-          })
 
-          render(<RouterProvider router={router} />)
-
-          const errorComponent = await screen.findByText(
-            `Error: error thrown`,
-            undefined,
-            { timeout: 750 },
+          test.each(callers)(
+            'an Error is thrown on first load in the route $caller function',
+            async ({ caller, testFn }) => {
+              const rootRoute = createRootRoute()
+              const indexRoute = createRoute({
+                getParentRoute: () => rootRoute,
+                path: '/',
+                beforeLoad: caller === 'beforeLoad' ? testFn : undefined,
+                loader: caller === 'loader' ? testFn : undefined,
+                component: function Home() {
+                  return <div>Index route content</div>
+                },
+                errorComponent: isUsingLazyError ? undefined : MyErrorComponent,
+              })
+
+              if (isUsingLazyError) {
+                indexRoute.lazy(() =>
+                  Promise.resolve(
+                    createLazyRoute('/')({
+                      errorComponent: MyErrorComponent,
+                    }),
+                  ),
+                )
+              }
+
+              const routeTree = rootRoute.addChildren([indexRoute])
+
+              const router = createRouter({
+                routeTree,
+                defaultPreload: options.preload,
+              })
+
+              render(<RouterProvider router={router} />)
+
+              const errorComponent = await screen.findByText(
+                `Error: error thrown`,
+                undefined,
+                { timeout: 750 },
+              )
+              await expect(
+                screen.findByText('Index route content'),
+              ).rejects.toThrow()
+              expect(errorComponent).toBeInTheDocument()
+            },
           )
-          await expect(
-            screen.findByText('Index route content'),
-          ).rejects.toThrow()
-          expect(errorComponent).toBeInTheDocument()
-        },
-      )
-    })
+        })
+      },
+    )
   },
 )