{"record":{"id":"f7e90328b25c9950","repo":"OrchardCMS/OrchardCore","slug":"invalid-async-component-load-result","errorCode":null,"errorMessage":"Invalid async component load result: ","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.runtime.esm.js","lineNumber":3279,"sourceCode":"                    else {\n                        throw err;\n                    }\n                })\n                    .then(function (comp) {\n                    if (thisRequest !== pendingRequest && pendingRequest) {\n                        return pendingRequest;\n                    }\n                    if (process.env.NODE_ENV !== 'production' && !comp) {\n                        warn(\"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 (process.env.NODE_ENV !== 'production' && comp && !isObject(comp) && !isFunction(comp)) {\n                        throw new Error(\"Invalid async component load result: \".concat(comp));\n                    }\n                    return comp;\n                })));\n    };\n    return function () {\n        var component = load();\n        return {\n            component: component,\n            delay: delay,\n            timeout: timeout,\n            error: errorComponent,\n            loading: loadingComponent\n        };\n    };\n}\n\nfunction createLifeCycle(hookName) {\n    return function (fn, target) {","sourceCodeStart":3261,"sourceCodeEnd":3297,"githubUrl":"https://github.com/OrchardCMS/OrchardCore/blob/4306c0717fe573f6fca1b4955909ddab6a192807/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.runtime.esm.js#L3261-L3297","documentation":"Vue 2's factory for async components (used by Vue.component(name, () => import(...)) and vue-router lazy routes) resolves the returned Promise and, after unwrapping an ES-module default export, requires the result to be an object (component options) or a function. This dev-mode check in vue.runtime.esm.js throws when the resolved value is neither, meaning the async loader did not return a component definition.","triggerScenarios":"Calling Vue.component('x', () => import('./x')) or defining a router component as () => Promise, where the promise resolves to a non-component value: a module with no default export and no component-options export (e.g. a bare side-effect module), a string, null/undefined, a number, or a wrong namespace like () => import('./x.js').someHelper.","commonSituations":"Migrating to webpack/ESM where the component file lacks `export default`; a typo'd dynamic import path that resolves to a barrel file; TypeScript/Vue SFC compiled without default export; returning an object that is not component options (e.g. a loader wrapper or a library namespace); mixed Vue 2 codebases copied from Vue 3 patterns.","solutions":["Ensure the dynamically imported module has `export default { ... }` (or new Vue-extended constructor); in SFCs confirm the <script> block exports the component as default.","If the module exports a named component, wrap it: () => import('./x').then(m => m.MyComponent).","Log the resolved value: () => import('./x').then(m => { console.log(m); return m.default || m; }) to see what the loader actually returns.","Verify the import path points to the component file, not a helpers/barrel module or wrong extension.","Check build tooling (webpack/babel/tsconfig) is compiling the SFC/component, not emitting an empty or unexpected module shape."],"exampleFix":"// before\nVue.component('chart', () => import('./utils/chart-helpers'));\n// after\nVue.component('chart', () => import('./components/Chart.vue')); // file has `export default { ... }`","handlingStrategy":"type-guard","validationCode":"async () => { const m = await import('./MyComp'); if (m && (typeof m === 'object' || typeof m === 'function') && (m.default || Object.keys(m).some(k => typeof m[k] === 'object' && m[k].template))) return; throw new Error('async import did not resolve to a Vue component'); }","typeGuard":"function isComponentLike(v) { if (!v) return false; if (typeof v === 'function') return true; return typeof v === 'object' && (typeof v.render === 'function' || typeof v.template === 'string' || typeof v.setup === 'function'); }","tryCatchPattern":"try { const comp = await loadFactory(); if (!isComponentLike(comp)) throw new TypeError('async component resolved to non-component: ' + typeof comp); Vue.component('x', comp); } catch (e) { console.error('Async component load failed', e); /* render fallback */ }","preventionTips":["Always `export default` the component in dynamically imported files","Wrap named exports: () => import('./x').then(m => m.default || m.X)","Spot-check lazy imports with a dev-time log of the resolved module","Keep import paths pointing at the component file, not barrels/util modules","Run lazy routes in a dev build early — Vue only asserts in dev mode"],"tags":["vue","async-component","dynamic-import","esm"],"backgroundTag":"unexpected-response-shape","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"}