Version

3.1.0-beta.4

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8YXN5bmNDb21wIG1lc3NhZ2U9J2FzeW5jIGNvbXAgbG9hZCBjb21wbGV0ZSc+PC9hc3luY0NvbXA+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuICBpbXBvcnQgeyBkZWZpbmVBc3luY0NvbXBvbmVudCwgZGVmaW5lQ29tcG9uZW50LCBoIH0gZnJvbSAndnVlJztcbiAgY29uc3QgYXN5bmNDb21wID0gZGVmaW5lQXN5bmNDb21wb25lbnQoe1xuICAgIGxvYWRlcjogKCkgPT4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuXHRcdFx0c2V0VGltZW91dCgoKSA9PiB7XG5cdFx0XHRcdHJlc29sdmUoe1xuXHRcdFx0XHRcdHByb3BzOiBbJ21lc3NhZ2UnXSxcblx0XHRcdFx0XHRyZW5kZXIoKSB7XG5cdFx0XHRcdFx0XHRyZXR1cm4gaCgnZGl2Jywge30sIGAke3RoaXMubWVzc2FnZX1gKVxuXHRcdFx0XHRcdH0gXG5cdFx0XHRcdH0pXG5cdFx0XHR9LCAxMDAwKVxuXHRcdH0pLFxuXHRcdGxvYWRpbmdDb21wb25lbnQ6IGRlZmluZUNvbXBvbmVudCh7XG5cdFx0XHRyZW5kZXI6ICgpID0+IGgoJ2RpdicsICdsb2FkaW5nLi4uLi4uJylcblx0XHR9KSxcblx0XHRlcnJvckNvbXBvbmVudDogZGVmaW5lQ29tcG9uZW50KHtcblx0XHRcdHJlbmRlcjogKCkgPT4gaCgnZGl2JywgJ0Vycm9yIGxvYWQgY29tcCcpXG5cdFx0fSksXG5cdFx0ZGVsYXk6IDAsXG5cdFx0dGltZW91dDogNTAwLFxuXHRcdHN1c3BlbnNpYmxlOiBmYWxzZSxcblx0XHRvbkVycm9yKGVycm9yLCByZXRyeSwgZmFpbCwgYXR0ZW1wdHMpIHtcblx0XHRcdGNvbnNvbGUubG9nKGVycm9yLCBhdHRlbXB0cyk7XG5cdFx0XHRmYWlsKClcblx0XHR9XG4gIH0pO1xuICBleHBvcnQgZGVmYXVsdCB7XG4gICAgY29tcG9uZW50czoge1xuICAgICAgYXN5bmNDb21wXG4gICAgfVxuICB9XG48L3NjcmlwdD4ifQ==

Steps to reproduce

step 1

// App.vue

<template>
  <asyncComp message="async comp load complete"></asyncComp>
</template>

<script>
import { defineAsyncComponent, defineComponent, h } from 'vue';
const asyncComp = defineAsyncComponent({
  loader: () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          props: ['message'],
          render() {
            return h('div', {}, `${this.message}`);
          }
        });
      }, 1000);
    }),
  loadingComponent: defineComponent({
    render: () => h('div', 'loading......')
  }),
  errorComponent: defineComponent({
    render: () => h('div', 'Error load comp')
  }),
  delay: 0,
  timeout: 500,
  suspensible: false,
  onError(error, retry, fail, attempts) {
    console.log(error, attempts);
    fail();
  }
});
export default {
  components: {
    asyncComp
  }
};
</script>

step 2

// main.js

import { createApp } from 'vue'
import App from './App.vue';
createApp(App).mount('#app');

What is expected?

Error load comp

What is actually happening?

async comp load complete

I looked into the code, this is expected. if it resolved after timeout, should still work

@edison1105 if it resolved after timeout, it still work, what is the meaning of the timeout?

The above code rendering process is as follows:

<!--start-->
loading......
<!--500ms-->
Error load comp
<!--1000ms-->
async comp load complete

This makes me feel that the timeout just triggers the error display and does not affect the final result

@JasonMgz0411 see this test case: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts#L343

Note you can use onError for a more advanced usage: https://v3.vuejs.org/api/global-api.html#defineasynccomponent