{"record":{"id":"b67f8c547e61cc88","repo":"OrchardCMS/OrchardCore","slug":"invalid-async-component-load-result-comp-vue-esm-browser","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.esm.browser.js","lineNumber":3884,"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":3866,"sourceCodeEnd":3902,"githubUrl":"https://github.com/OrchardCMS/OrchardCore/blob/4306c0717fe573f6fca1b4955909ddab6a192807/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.esm.browser.js#L3866-L3902","documentation":"Same Vue 2.7 async-component validation as the common.dev build, in the ESM browser build (vue.esm.browser.js): after the loader promise resolves and any ES-module default is unwrapped, the resulting value must be an object (options) or function (component). Otherwise the loader throws `Invalid async component load result: ${comp}`.","triggerScenarios":"Component factory () => import(...) resolving to a module without a component default export; resolving to a non-component value (string template, plain object of helpers, undefined from a misresolved path); interop failure so the wrapper object isn't unwrapped via __esModule/Symbol.toStringTag.","commonSituations":"Browser-native ESM builds importing .js component files that export named members only; typo'd import paths resolving to wrong files; mixing Vue 2 and Vue 3 component definitions (Vue 3 defineAsyncComponent/functional shapes rejected here).","solutions":["Make the loaded module export the component options object or function as its default export.","Map the specific named export in the loader: () => import('./c.js').then(m => m.MyComponent).","Confirm you're not passing a Vue 3-style component definition to Vue 2.7; adapt it to Vue 2 options API.","Inspect the resolved module (console.log(m)) to see its actual export shape."],"exampleFix":"// before\nconst AsyncComp = () => import('./widget.js'); // default export is a string template\n\n// after\n// widget.js: export default { template: '...', ... }\nconst AsyncComp = () => import('./widget.js').then(m => m.default);","handlingStrategy":"type-guard","validationCode":"function validAsyncComp(loader) {\n  return function () {\n    return loader().then(function (m) {\n      var c = (m && (m.__esModule || m[Symbol.toStringTag] === 'Module')) ? m.default : m;\n      if (!(c && (typeof c === 'object' || typeof c === 'function'))) {\n        throw new Error('Module did not export a Vue component');\n      }\n      return c;\n    });\n  };\n}","typeGuard":"function isVue2Component(v) { return v != null && typeof v === 'object' && ('render' in v || 'template' in v || typeof v === 'function'); }","tryCatchPattern":"const AsyncComp = () => import('./widget.js')\n  .then(m => {\n    const c = m.default || m.Widget;\n    if (!c || (typeof c !== 'object' && typeof c !== 'function')) throw new Error('Bad export');\n    return c;\n  })\n  .catch(err => { console.error(err); return FallbackComponent; });","preventionTips":["In ESM builds, rely on default exports for dynamically imported components.","Avoid exporting plain strings/primitives from component modules.","Don't feed Vue 3-style component definitions into a Vue 2.7 app.","Wrap dynamic imports with a shape-checking helper used across the app."],"tags":["vue","async-component","esm","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"}