From 011417b011e282487d686b9d55717c32639d1d59 Mon Sep 17 00:00:00 2001
From: Simon Siefke <simon.siefke@gmail.com>
Date: Thu, 16 Apr 2020 11:32:58 +0200
Subject: [PATCH 1/3] better error message when component is a promise (fix
 #3167)

---
 src/create-route-map.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/create-route-map.js b/src/create-route-map.js
index aa51864a9..b3f21d0e2 100644
--- a/src/create-route-map.js
+++ b/src/create-route-map.js
@@ -70,6 +70,12 @@ function addRouteRecord (
         path || name
       )} cannot be a ` + `string id. Use an actual component instead.`
     )
+    assert(
+      route.component.toString() !== '[object Promise]',
+      `route config "component" for path: ${String(
+        path || name
+      )} cannot be a promise. Use a function that returns a promise instead (e.g. \`() => import ('./components/About.vue')\`)`
+    )
   }
 
   const pathToRegexpOptions: PathToRegexpOptions =

From 1a75110543810d9a27148cc6245b21fe31985024 Mon Sep 17 00:00:00 2001
From: Simon Siefke <simon.siefke@gmail.com>
Date: Thu, 16 Apr 2020 13:00:33 +0200
Subject: [PATCH 2/3] try to fix failing test

---
 src/create-route-map.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/create-route-map.js b/src/create-route-map.js
index b3f21d0e2..7d4471889 100644
--- a/src/create-route-map.js
+++ b/src/create-route-map.js
@@ -70,12 +70,14 @@ function addRouteRecord (
         path || name
       )} cannot be a ` + `string id. Use an actual component instead.`
     )
-    assert(
-      route.component.toString() !== '[object Promise]',
-      `route config "component" for path: ${String(
-        path || name
-      )} cannot be a promise. Use a function that returns a promise instead (e.g. \`() => import ('./components/About.vue')\`)`
-    )
+    if (route.component && route.component.toString) {
+      assert(
+        route.component.toString() !== '[object Promise]',
+        `route config "component" for path: ${String(
+          path || name
+        )} cannot be a promise. Use a function that returns a promise instead (e.g. \`() => import ('./components/About.vue')\`)`
+      )
+    }
   }
 
   const pathToRegexpOptions: PathToRegexpOptions =

From f6f0db63a9639345b676cbf94953d48f1bf9ce2e Mon Sep 17 00:00:00 2001
From: Simon Siefke <simon.siefke@gmail.com>
Date: Wed, 24 Jun 2020 19:02:42 +0200
Subject: [PATCH 3/3] fix: add unit test and update message

---
 src/create-route-map.js            | 4 +---
 test/unit/specs/create-map.spec.js | 9 +++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/create-route-map.js b/src/create-route-map.js
index 7d4471889..31608bdd0 100644
--- a/src/create-route-map.js
+++ b/src/create-route-map.js
@@ -73,9 +73,7 @@ function addRouteRecord (
     if (route.component && route.component.toString) {
       assert(
         route.component.toString() !== '[object Promise]',
-        `route config "component" for path: ${String(
-          path || name
-        )} cannot be a promise. Use a function that returns a promise instead (e.g. \`() => import ('./components/About.vue')\`)`
+        `Component "${String(name)}" in record with path "${path}" is a Promise instead of a function that returns a Promise. Did you write "import('./MyPage.vue')" instead of "() => import('./MyPage.vue')"?`
       )
     }
   }
diff --git a/test/unit/specs/create-map.spec.js b/test/unit/specs/create-map.spec.js
index 25bdb3d45..ea426f553 100644
--- a/test/unit/specs/create-map.spec.js
+++ b/test/unit/specs/create-map.spec.js
@@ -147,6 +147,15 @@ describe('Creating Route Map', function () {
     expect(console.warn.calls.argsFor(0)[0]).toEqual('[vue-router] Non-nested routes must include a leading slash character. Fix the following routes: \n- bar')
   })
 
+  it('in development, warn if a component is a promise', function () {
+    process.env.NODE_ENV = 'development'
+    expect(() => {
+      maps = createRouteMap([
+        { path: 'bar', name: 'bar', component: Promise.resolve(Bar) }
+      ])
+    }).toThrow(new Error(`[vue-router] Component "bar" in record with path "bar" is a Promise instead of a function that returns a Promise. Did you write "import('./MyPage.vue')" instead of "() => import('./MyPage.vue')"?`))
+  })
+
   it('in development, it does not log the missing leading slash when routes are valid', function () {
     process.env.NODE_ENV = 'development'
     maps = createRouteMap([