From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 24 May 2020 09:35:26 +0000 (+0200)
Subject: feat(warn): warn if component is a promise
X-Git-Tag: v4.0.0-alpha.13~47
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4b2bfa80cd3440441d71e690ca85d0532a4b8428;p=thirdparty%2Fvuejs%2Frouter.git

feat(warn): warn if component is a promise
---

diff --git a/__tests__/warnings.spec.ts b/__tests__/warnings.spec.ts
index 26255078..23366b4c 100644
--- a/__tests__/warnings.spec.ts
+++ b/__tests__/warnings.spec.ts
@@ -163,4 +163,15 @@ describe('warnings', () => {
       'duplicated params with name "id" for path "/:id/:id"'
     ).toHaveBeenWarned()
   })
+
+  it('warns if component is a promise instead of a function that returns a promise', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      // simulates import('./component.vue')
+      routes: [{ path: '/foo', component: Promise.resolve(component) }],
+    })
+
+    await expect(router.push({ path: '/foo' })).resolves.toBe(undefined)
+    expect('"/foo" is a Promise instead of a function').toHaveBeenWarned()
+  })
 })
diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
index f1c96a76..c711d830 100644
--- a/src/navigationGuards.ts
+++ b/src/navigationGuards.ts
@@ -166,7 +166,16 @@ export function extractComponentsGuards(
 
   for (const record of matched) {
     for (const name in record.components) {
-      const rawComponent = record.components[name]
+      let rawComponent = record.components[name]
+      // warn if user wrote import('/component.vue') instead of () => import('./component.vue')
+      if (__DEV__ && 'then' in rawComponent) {
+        warn(
+          `Component "${name}" in record with path "${record.path}" is a Promise instead of a function that returns a Promise. Did you write "import('./MyPage.vue')" instead of "() => import('./MyPage.vue')"? This will break in production if not fixed.`
+        )
+        let promise = rawComponent
+        rawComponent = () => promise
+      }
+
       if (isRouteComponent(rawComponent)) {
         // __vccOpts is added by vue-class-component and contain the regular options
         let options: ComponentOptions =
@@ -182,7 +191,7 @@ export function extractComponentsGuards(
 
         if (__DEV__ && !('catch' in componentPromise)) {
           warn(
-            `Component "${name}" at 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.`
+            `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 {