{"record":{"id":"8c4c4afbf1107d24","repo":"vuejs/core","slug":"invalid-async-component-load-result-comp","errorCode":null,"errorMessage":"Invalid async component load result: ${comp}","messagePattern":"Invalid async component load result: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/runtime-core/src/apiAsyncComponent.ts","lineNumber":112,"sourceCode":"          .then((comp: any) => {\n            if (thisRequest !== pendingRequest && pendingRequest) {\n              return pendingRequest\n            }\n            if (__DEV__ && !comp) {\n              warn(\n                `Async component loader resolved to undefined. ` +\n                  `If you are using retry(), make sure to return its return value.`,\n              )\n            }\n            // interop module default\n            if (\n              comp &&\n              (comp.__esModule || comp[Symbol.toStringTag] === 'Module')\n            ) {\n              comp = comp.default\n            }\n            if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {\n              throw new Error(`Invalid async component load result: ${comp}`)\n            }\n            resolvedComp = comp\n            return comp\n          }))\n    )\n  }\n\n  return defineComponent({\n    name: 'AsyncComponentWrapper',\n\n    __asyncLoader: load,\n\n    __asyncHydrate(el, instance, hydrate) {\n      const wasConnected = el.isConnected\n      let patched = false\n      ;(instance.bu || (instance.bu = [])).push(() => (patched = true))\n      const performHydrate = () => {\n        // skip hydration if the component has been patched","sourceCodeStart":94,"sourceCodeEnd":130,"githubUrl":"https://github.com/vuejs/core/blob/a2b40db9a83b36ed9da3a16403cf8f040262d73f/packages/runtime-core/src/apiAsyncComponent.ts#L94-L130","documentation":"Thrown in __DEV__ by defineAsyncComponent's loader when the resolved value is truthy but is neither a plain object nor a function. After interop unwrapping (esModule default / Module toStringTag), a valid Vue component must be an options object or a render function. apiAsyncComponent.ts:112 aborts because the loader returned a non-component value (e.g. a string, number, array, or a Promise).","triggerScenarios":"An async loader whose import returns a non-component — e.g. `() => import('./constants')` where the module exports a string/number; a dynamic import of a .json or a non-Vue module; a loader that forgets `.default` after an interop edge case; returning a Promise-of-Promise that resolves to a raw value.","commonSituations":"Typo in the import path pointing at a non-component module; misconfigured dynamic import in a route config; a barrel re-export that swaps a component for a plain value; tree-shaking that leaves a module exporting a non-component default.","solutions":["Verify the loader actually imports a Vue component: check that the module's default export is an options object or a function.","If using named exports, return the correct binding, e.g. `() => import('./MyComp.vue').then(m => m.MyComp)`.","Ensure retry()/onError handlers return their value so the resolved value stays a component (the related 'resolved to undefined' warn at line 99 covers that case).","Add a runtime type check in the loader and map non-components to a real component or a thrown error."],"exampleFix":"// before\nconst AsyncComp = defineAsyncComponent(() => import('./config.json'))\n\n// after\nconst AsyncComp = defineAsyncComponent(() => import('./RealComponent.vue'))","handlingStrategy":"type-guard","validationCode":"// Validate the loader's resolved value before registering the async component.\nfunction isComponent(v: unknown): boolean {\n  return (typeof v === 'object' && v !== null) || typeof v === 'function'\n}\nconst loader = async () => {\n  const mod = await import('./MyComp.vue')\n  const comp = mod?.__esModule ? mod.default : mod\n  if (!isComponent(comp)) {\n    throw new Error(`async loader resolved to non-component: ${comp}`)\n  }\n  return comp\n}\ndefineAsyncComponent(loader)","typeGuard":"function isVueComponent(v: unknown): v is object | ((...a: any[]) => any) {\n  return (typeof v === 'object' && v !== null) || typeof v === 'function'\n}","tryCatchPattern":null,"preventionTips":["Point dynamic imports at actual .vue components, not arbitrary modules.","If using named exports, map them in the loader: `.then(m => m.NamedComp)`.","Return values from retry()/onError handlers so the resolved value stays a component."],"tags":["vue","runtime-core","async-component","defineasynccomponent","dynamic-import"],"backgroundTag":null,"analyzedSha":"a2b40db9a83b36ed9da3a16403cf8f040262d73f","analyzedAt":"2026-08-12T14:21:14.989Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}