#3167·vue-router

Better error message Component type is invalid

Author: SimonSiefkeCreated Apr 7, 2020Updated Jul 15, 2025
Labelsimprovementfixed on 4.x

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.