{"record":{"id":"258f54a0f94668cc","repo":"OrchardCMS/OrchardCore","slug":"invalid-async-component-load-result-comp-vue-runtime-common","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.runtime.common.dev.js","lineNumber":3173,"sourceCode":"                    else {\n                        throw err;\n                    }\n                })\n                    .then((comp) => {\n                    if (thisRequest !== pendingRequest && pendingRequest) {\n                        return pendingRequest;\n                    }\n                    if (!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 (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":3155,"sourceCodeEnd":3191,"githubUrl":"https://github.com/OrchardCMS/OrchardCore/blob/4306c0717fe573f6fca1b4955909ddab6a192807/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.runtime.common.dev.js#L3155-L3191","documentation":"Vue 2.7's runtime-only CommonJS dev build (vue.runtime.common.dev.js) applies the same check in its async component loader: the value returned by the loader (after ES-module default interop) must be a component object or function; otherwise it throws `Invalid async component load result: ${comp}`. The runtime build has no compiler, so components must arrive as render-function-based options objects/functions.","triggerScenarios":"Async loader () => import('./c') where the module's default export is a string template or options lacking a render function in the runtime-only build; module resolved to a non-component export; CJS/ESM interop not applied so the raw namespace or wrong value is checked.","commonSituations":"Using the runtime-only build while components are defined with `template` strings resolved through loaders that return raw strings; mixed Vue 2.7 standalone (with compiler) and runtime builds in one app; webpack alias pointing vue to the runtime build unexpectedly.","solutions":["Ensure loaded components are pre-compiled (render functions) or use the full build (vue.common.dev.js with compiler) if you rely on template strings.","Return the component options object/function explicitly: () => import('./c.js').then(m => m.default).","Check the webpack/vite `vue` alias — runtime-only vs compiler-included build mismatch is a common cause.","Log the loader result to verify its shape before it reaches Vue's validation."],"exampleFix":"// before\nVue.component('chart', () => import('./chart')); // chart.js default-exports { template: '<div/>' } with runtime-only build\n\n// after\n// Precompile: export default { render(h) { return h('div'); } }\nVue.component('chart', () => import('./chart').then(m => m.default));","handlingStrategy":"type-guard","validationCode":"function assertRenderCapable(comp) {\n  if (comp && (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) comp = comp.default;\n  if (!comp || (typeof comp !== 'object' && typeof comp !== 'function')) {\n    throw new Error('Async loader must resolve to component object/function');\n  }\n  return comp;\n}\n// usage: Vue.component('chart', () => import('./chart').then(assertRenderCapable));","typeGuard":"function hasRenderFn(c) { return c != null && typeof c === 'object' && typeof c.render === 'function'; }","tryCatchPattern":"Vue.component('chart', () =>\n  import('./chart')\n    .then(m => m.default)\n    .catch(err => {\n      if (/Invalid async component load result/.test(String(err.message))) {\n        return { render: h => h('div', 'component failed to load') };\n      }\n      throw err;\n    })\n);","preventionTips":["With the runtime-only build, ship pre-compiled components (render functions), not template strings.","Verify the `vue` alias points at the intended build (runtime vs full) before debugging async components.","Standardize one loader helper that unwraps module default and validates shape for all async components.","Add a fallback component in loaders so a bad module degrades gracefully."],"tags":["vue","async-component","runtime-only","dynamic-import"],"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-16T04:17:20.429Z"}