feat(warn): warn defineAsyncComponent usage in routes (#682)

diff --git a/__tests__/warnings.spec.ts b/__tests__/warnings.spec.ts
index 5273b0fbbd56cbc5d2d24907a639b574f7853e79..41e8eda8b75d603899b2d582c14d2d2b88393717 100644 (file)
--- a/__tests__/warnings.spec.ts
+++ b/__tests__/warnings.spec.ts
@@ -1,6 +1,11 @@
 import { mockWarn } from 'jest-mock-warn'
 import { createMemoryHistory, createRouter } from '../src'
-import { defineComponent, FunctionalComponent, h } from 'vue'
+import {
+  defineAsyncComponent,
+  defineComponent,
+  FunctionalComponent,
+  h,
+} from 'vue'
 
 let component = defineComponent({})
 
@@ -177,6 +182,23 @@ describe('warnings', () => {
     expect('"/foo" is a Promise instead of a function').toHaveBeenWarned()
   })
 
+  it('warns if use defineAsyncComponent in routes', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      // simulates import('./component.vue')
+      routes: [
+        {
+          path: '/foo',
+          component: defineAsyncComponent(() => Promise.resolve({})),
+        },
+      ],
+    })
+    await router.push('/foo')
+    expect(
+      `Component "default" in record with path "/foo" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))"`
+    ).toHaveBeenWarned()
+  })
+
   it('warns if no route matched', async () => {
     const router = createRouter({
       history: createMemoryHistory(),

diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
index 3f665c3065eb44cc00939df13494f3e80bed72c9..805b3dac92541f8a7ada0a1ce3908f4211528b13 100644 (file)
--- a/src/navigationGuards.ts
+++ b/src/navigationGuards.ts
@@ -261,6 +261,16 @@ export function extractComponentsGuards(
           )
           let promise = rawComponent
           rawComponent = () => promise
+        } else if (
+          (rawComponent as any).__asyncLoader &&
+          guardType === 'beforeRouteEnter'
+        ) {
+          warn(
+            `Component "${name}" in record with path "${record.path}" is defined ` +
+              `using "defineAsyncComponent()". ` +
+              `Write "() => import('./MyPage.vue')" instead of ` +
+              `"defineAsyncComponent(() => import('./MyPage.vue'))".`
+          )
         }
       }