Better error message Component type is invalid

[SimonSiefke]

Version

3.1.5

Reproduction link

https://codesandbox.io/s/vue-routing-example-em6dm?file=/router/index.js

Visit the /hello page in the codesandbox reproduction and open the console to see the error message

Steps to reproduce

Setup lazy-loaded routes and make a mistake by forgetting that it must not be an import but a function that returns the import statement

const routes = [
  {
    path: '/',
    name: 'Home',
    component: import(/* webpackChunkName: "Home" */ '../views/Home.vue'),
  }
]

What is expected?

An error message that says the component is not valid (because it is a promise) and that the expected type is a function

What is actually happening?

Vue shows the following error message:

Failed to mount component: template or render function not defined.

[bponomarenko]

@SimonSiefke I don't think that is a best place to address your issue, as error message you mentioned is coming from Vue.js itself: https://github.com/vuejs/vue/blob/d9b27a92bd5277ee23a4e68a8bd31ecc72f4c99b/src/core/instance/lifecycle.js#L161

[SimonSiefke]

I think this might be the best place. Vue router is already validating the type of the component here. If the error message would come from Vue router instead of Vue it would make it easier to narrow down the problem (i.e. user would intuitively look inside router.js file)

[bponomarenko]

@SimonSiefke Oh, I see what you mean. Indeed, it might be a good improvement. I guess, it would be the best to mark it as a "Feature request" instead of an "Issue" then.