{"record":{"id":"0251ce853c4e8925","repo":"OrchardCMS/OrchardCore","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":"src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.common.dev.js","lineNumber":3892,"sourceCode":"                    else {\n                        throw err;\n                    }\n                })\n                    .then((comp) => {\n                    if (thisRequest !== pendingRequest && pendingRequest) {\n                        return pendingRequest;\n                    }\n                    if (!comp) {\n                        warn$2(`Async component loader resolved to undefined. ` +\n                            `If you are using retry(), make sure to return its return value.`);\n                    }\n                    // interop module default\n                    if (comp &&\n                        (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) {\n                        comp = comp.default;\n                    }\n                    if (comp && !isObject(comp) && !isFunction(comp)) {\n                        throw new Error(`Invalid async component load result: ${comp}`);\n                    }\n                    return comp;\n                })));\n    };\n    return () => {\n        const component = load();\n        return {\n            component,\n            delay,\n            timeout,\n            error: errorComponent,\n            loading: loadingComponent\n        };\n    };\n}\n\nfunction createLifeCycle(hookName) {\n    return (fn, target = currentInstance) => {","sourceCodeStart":3874,"sourceCodeEnd":3910,"githubUrl":"https://github.com/OrchardCMS/OrchardCore/blob/4306c0717fe573f6fca1b4955909ddab6a192807/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.common.dev.js#L3874-L3910","documentation":"Vue 2.7's async component factory (used by Vue.component(name, () => import(...)) / defineAsyncComponent-style loaders in the CommonJS dev build) validates the resolved module after the dynamic import/load: after unwrapping an ES-module default, the result must be an object (component options) or a function (functional component). Anything else (undefined, a string, null wrapper values, wrong export) triggers this Error, with `comp` interpolated into the message.","triggerScenarios":"A dynamic import resolves to a module whose default export is missing or not a component: () => import('./x') where x.js has no component default export; exporting a plain value/string instead of a component options object; mismatched module systems (ES module imported from CJS loader without __esModule/Module tag so the wrong shape survives interop).","commonSituations":"Migrating Vue 2 code that imported a component from a file that also re-exports constants (named vs default confusion); webpack/vite config changes that alter module format; TypeScript files compiled without esModuleInterop so comp.default is not unwrapped.","solutions":["Ensure the dynamically loaded module's default export (or the named export you point at) is a valid component options object or function.","If the module exports the component as a named export, load it explicitly: () => import('./Comp.vue').then(m => m.Comp).","Check bundler/TS interop settings (esModuleInterop, output module format) so comp.__esModule/Module unwrapping works.","Log the loaded module in the loader to inspect its shape before returning it."],"exampleFix":"// before\nVue.component('my-comp', () => import('./myComp')); // module has no default component\n\n// after\nVue.component('my-comp', () =>\n  import('./myComp').then(m => m.default || m.MyComp)\n);","handlingStrategy":"type-guard","validationCode":"function isValidComponent(comp) {\n  if (comp && (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) comp = comp.default;\n  return comp != null && (typeof comp === 'object' || typeof comp === 'function');\n}\n// usage before registering: if (!isValidComponent(m)) console.warn('bad async component');","typeGuard":"function isComponentLike(v) { return v != null && (typeof v === 'object' || typeof v === 'function'); }","tryCatchPattern":"Vue.component('x', function () {\n  return import('./x.vue')\n    .then(function (m) { return m.default || m; })\n    .catch(function (err) {\n      if (/Invalid async component load result/.test(err.message)) {\n        return FallbackComponent;\n      }\n      throw err;\n    });\n});","preventionTips":["Always default-export a component options object (or function) from dynamically imported files.","Point loaders at the exact export: .then(m => m.NamedExport) for named exports.","Keep bundler/TS interop settings (esModuleInterop) consistent so module-default unwrapping works.","Log loader results once during setup to confirm the resolved shape."],"tags":["vue","async-component","dynamic-import","module"],"backgroundTag":"invalid-async-component-result","analyzedSha":"4306c0717fe573f6fca1b4955909ddab6a192807","analyzedAt":"2026-09-13T17:41:05.024Z","contentChangedAt":"2026-09-13T17:41:05.024Z","schemaVersion":2},"datasetVersion":"2026-09-15T23:17:13.987Z"}