Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better error message Component type is invalid #3167

Open
SimonSiefke opened this issue Apr 7, 2020 · 3 comments · May be fixed by #3174
Open

Better error message Component type is invalid #3167

SimonSiefke opened this issue Apr 7, 2020 · 3 comments · May be fixed by #3174
Labels
improvement

Comments

@SimonSiefke
Copy link

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
Copy link

@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
Copy link
Author

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
Copy link

@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.

SimonSiefke added a commit to SimonSiefke/vue-router that referenced this issue Apr 16, 2020
@SimonSiefke
better error message when component is a promise (fix vuejs#3167)
43db967
SimonSiefke added a commit to SimonSiefke/vue-router that referenced this issue Apr 16, 2020
@SimonSiefke
better error message when component is a promise (fix vuejs#3167)
011417b
@SimonSiefke SimonSiefke linked a pull request Aug 3, 2020 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improvement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

better error message when component is a promise (fix #3167) SimonSiefke/vue-router
3 participants
@bponomarenko @posva @SimonSiefke