fix(guards): propagate lazy loading rejections

Author: posva

__tests__/guards/extractComponentsGuards.spec.ts

@@ -33,6 +33,10 @@ const SingleGuardNamed: RouteRecordRaw = {
     other: { ...components.Foo, beforeRouteEnter },
   },
 }
+const ErrorLazyLoad: RouteRecordRaw = {
+  path: '/',
+  component: () => Promise.reject(new Error('custom')),
+}
 
 beforeEach(() => {
   beforeRouteEnter.mockReset()
@@ -96,4 +100,11 @@ describe('extractComponentsGuards', () => {
     await checkGuards([WrongLazyRoute], 0, 1)
     expect('Promise instead of a function').toHaveBeenWarned()
   })
+
+  it('rejects if lazy load fails', async () => {
+    await expect(checkGuards([ErrorLazyLoad], 0, 1)).rejects.toHaveProperty(
+      'message',
+      'custom'
+    )
+  })
 })

__tests__/lazyLoading.spec.ts

@@ -264,7 +264,7 @@ describe('Lazy Loading', () => {
     await router.push('/foo').catch(spy)
 
     expect(spy).toHaveBeenCalled()
-    expect(console.error).toHaveBeenCalledWith(error)
+    expect(spy).toHaveBeenLastCalledWith(error)
 
     expect(router.currentRoute.value).toMatchObject({
       path: '/',
@@ -307,10 +307,11 @@ describe('Lazy Loading', () => {
     const spy = jest.fn()
 
     parent.resolve()
-    child.reject()
+    const error = new Error()
+    child.reject(error)
     await router.push('/foo').catch(spy)
 
-    expect(spy).toHaveBeenCalledWith(expect.any(Error))
+    expect(spy).toHaveBeenCalledWith(error)
 
     expect(router.currentRoute.value).toMatchObject({
       path: '/',

src/navigationGuards.ts

@@ -296,9 +296,6 @@ export function extractComponentsGuards(
             `Component "${name}" in record with path "${record.path}" is a function that does not return a Promise. If you were passing a functional component, make sure to add a "displayName" to the component. This will break in production if not fixed.`
           )
           componentPromise = Promise.resolve(componentPromise as RouteComponent)
-        } else {
-          // display the error if any
-          componentPromise = componentPromise.catch(console.error)
         }
 
         guards.push(() =>