vue-router
vue-router copied to clipboard
Better error message Component type is invalid
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.
@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
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)
@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.