Meituan-Dianping/mpvue · error

Failed to resolve async component: ${String(factory)} (Reaso

Error message

Failed to resolve async component: ${String(factory)} (Reason: ${reason})

What it means

When an async component factory's promise rejects (or its error callback fires with a reason), Vue warns that the component could not be resolved. If an error component (`errorComp`) is defined it will be rendered; otherwise the slot stays empty.

Source

Thrown at src/core/vdom/helpers/resolve-async-component.js:77

    const forceRender = () => {
      for (let i = 0, l = contexts.length; i < l; i++) {
        contexts[i].$forceUpdate()
      }
    }

    const resolve = once((res: Object | Class<Component>) => {
      // cache resolved
      factory.resolved = ensureCtor(res, baseCtor)
      // invoke callbacks only if this is not a synchronous resolve
      // (async resolves are shimmed as synchronous during SSR)
      if (!sync) {
        forceRender()
      }
    })

    const reject = once(reason => {
      process.env.NODE_ENV !== 'production' && warn(
        `Failed to resolve async component: ${String(factory)}` +
        (reason ? `\nReason: ${reason}` : '')
      )
      if (isDef(factory.errorComp)) {
        factory.error = true
        forceRender()
      }
    })

    const res = factory(resolve, reject)

    if (isObject(res)) {
      if (typeof res.then === 'function') {
        // () => Promise
        if (isUndef(factory.resolved)) {
          res.then(resolve, reject)
        }
      } else if (isDef(res.component) && typeof res.component.then === 'function') {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Check the browser network/console for the failing chunk URL and fix the import path or deployment
2. Define `error` and `loading` components: `() => ({ component: import('./Foo.vue'), error: ErrorComp, delay: 200 })` so failures degrade gracefully
3. Add a retry on chunk-load error (reload the page or re-attempt the import)
4. Verify publicPath and service worker cache strategy after deployments

Example fix

// before
const Foo = () => import('./Foo.vue')
// after
const Foo = () => ({
  component: import('./Foo.vue'),
  error: { template: '<div>Failed to load</div>' },
  delay: 200,
  timeout: 10000
})

const Foo = () => ({
  component: import('./Foo.vue').catch(err => {
    console.error('chunk load failed', err)
    // optional: window.location.reload() once to recover stale chunks
    return Promise.reject(err)
  }),
  error: { template: '<div>Component failed to load. <button @click="$forceUpdate()">Retry</button></div>' },
  delay: 200,
  timeout: 10000
})

When it happens

Trigger: `() => import('./Foo.vue')` failing to load (network error, 404, build chunk missing); a factory using the advanced object syntax calling `reject(reason)`; a webpack dynamic import throwing at runtime.

Common situations: Chunk load failures after a deploy invalidates old hashed filenames; misconfigured publicPath/code-splitting; offline PWA with stale service-worker cache; typo in the import path.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/a83bab17e1f71bbe. Report an issue: GitHub.