More verbose error messaging for Vue 2 style dynamic imports - Invalid VNode type: undefined

[fimion]

What problem does this feature solve?

I know that there is work being done to create friendlier and more helpful errors for migrating code bases. I've recently done a migration from 2 to 3 on a small demo I work on, and I found the messaging when erroring on old style dynamic imports to be extremely unhelpful.

The previous style dynamic imports looked like this:

const MyComponent = () => import('./MyComponent.vue');

However, when migrating, the error received for this type of import is a bit lacking:

[Vue warn]: Invalid VNode type: undefined (undefined) 
  at <MyComponent>

So I am aware of what is causing the error, but I have no idea how to fix it or that I would need to import defineAsyncComponent.

What does the proposed API look like?

in the error message handling for this, would it be possible to check if the thing that errored is the Vue 2 style import and link to the appropriate migration docs?

[Vue warn]: Invalid VNode type: undefined (undefined) 
  at <MyComponent>
[Vue warn]: It looks like you are using a Vue 2.x style dynamic import. You'll need to use defineAsyncComponent to do this now.
[Vue warn]: https://v3.vuejs.org/guide/migration/async-components.html

or something similar?

[edison1105]

We can also do this in Vetur

[fimion]

so based on my quick search, it looks like this error is happening here ish (as of 11/01/2020):
https://github.com/vuejs/vue-next/blob/fff62e2ee8accf31bb5ac5abdb4c0636216cfd0e/packages/runtime-core/src/renderer.ts#L549

I can take a crack at this if no one objects?

[posva]

@fimion A better warning should indeed help migration! Feel free to give it a try

[panstromek]

I bumped into this, too. Some nicer error would be appreciated, because it was just one of many breakages I was dealing with during migration, so it took some time to find out what is the cause. Currently there's no indication of what to look for when you see this error.

Note that if the element is inside a transition, you get different error: Component inside <Transition> renders non-element root node that cannot be animated, which is even more misleading, because Transition had breaking changes, too. This led me down the rabbit hole of debugging the transition element interaction, even though the problem was just the async component.