Vue-next: Async component support

[cexbrayat]

Version

3.0.0-alpha.6

Reproduction link

https://github.com/cexbrayat/async-component

Steps to reproduce

Transform a component to use async component as in Vue 2.x

export default defineComponent({
  name: "App",
  components: {
    Hello: () => import('./components/Hello.vue') as any
  }
});

as any is used because of a typing issue (components only allows PublicAPIComponent)
But using a dynamic import throws using Vue 3.0.0-alpha.6:

[Vue warn]: Invalid HostVNode type: undefined (undefined) 
  at <Hello> <empty string> 
  at <App> (Root)

What is expected?

It should work as in Vue 2.x

What is actually happening?

An error is thrown

[aztalbot]

Looks like the behavior is set to change based on this rfc. createAsyncComponent doesn't seem to be implemented yet. Without it, the only way to do async components right now is to use Suspense with async setup.

[yyx990803]

Landed in alpha.10 via c3bb316

[antoniandre]

Is this resolved?
In Vue 3.0.0 on a fresh Vue project install, the following still throws an error and doesn't mount component:

// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld: () => import('./components/HelloWorld.vue')
  }
}

Error:

[Vue warn]: Invalid VNode type: undefined (undefined) 
  at <HelloWorld msg="Welcome to Your Vue.js App" > 
  at <App>

When using the standard import the component is mounted correctly.

---

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Binaries:
Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
Browsers:
Chrome: 85.0.4183.121
Edge: Not Found
Firefox: 80.0.1
Safari: 13.0.5
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-helper-vue-transform-on: 1.0.0-rc.2
@vue/babel-plugin-jsx: 1.0.0-rc.3
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.5.6
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.5.6
@vue/cli-plugin-babel: ~4.5.0 => 4.5.6
@vue/cli-plugin-eslint: ~4.5.0 => 4.5.6
@vue/cli-plugin-router: 4.5.6
@vue/cli-plugin-vuex: 4.5.6
@vue/cli-service: ~4.5.0 => 4.5.6
@vue/cli-shared-utils: 4.5.6
@vue/compiler-core: 3.0.0
@vue/compiler-dom: 3.0.0
@vue/compiler-sfc: ^3.0.0-0 => 3.0.0
@vue/compiler-ssr: 3.0.0
@vue/component-compiler-utils: 3.2.0
@vue/preload-webpack-plugin: 1.1.2
@vue/reactivity: 3.0.0
@vue/runtime-core: 3.0.0
@vue/runtime-dom: 3.0.0
@vue/shared: 3.0.0
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.4
vue: ^3.0.0-0 => 3.0.0
vue-eslint-parser: 7.1.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.3 (16.0.0-beta.8)
vue-style-loader: 4.1.2
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.5.6

[antoniandre]

I just found out it has to be wrapped with defineAsyncComponent as per the migration guide: https://v3.vuejs.org/guide/migration/async-components.html#overview

This page also says so: https://v3.vuejs.org/guide/component-dynamic-async.html#async-components. 👍

I must have accessed an old doc, or missed it. 😅