OrchardCMS/OrchardCore · error · Error

Invalid async component load result:

Error message

Invalid async component load result:

What it means

Same dev-mode validation as error 430 but in the UMD/dev build vue.runtime.js: after async component resolution and ES-module default interop, Vue requires the result to be an object or function and throws otherwise. It signals that a lazily loaded component factory resolved to something that is not a Vue component definition.

Solutions

  1. Add/restore `export default` of the component options object in the lazily imported file.
  2. Map named exports explicitly: () => import('./x').then(m => m.default || m.X).
  3. Log or breakpoint inside the factory to inspect the resolved module shape and correct the access path.
  4. Fix the import path so it targets the actual component module.
  5. Confirm the dev build's stricter dev-only assertion is the surface: the same code may appear to 'work' silently in prod, so fix the module shape rather than suppressing the error.

Example fix

// before
const AsyncList = () => import('./list-module'); // module has no default export
// after
const AsyncList = () => import('./list-module').then(m => m.List);
// or add `export default List` in list-module.js
Defensive patterns

Strategy: type-guard

Validate before calling

import('./list-module').then(m => { const c = m.default || m.List; if (!c || (typeof c !== 'object' && typeof c !== 'function')) throw new TypeError('loader must resolve to object/function, got ' + typeof c); return c; })

Type guard

function isValidAsyncComp(v) { return v != null && (typeof v === 'object' || typeof v === 'function'); }

Try / catch

try { const m = await loader(); if (!isValidAsyncComp(m.default || m)) throw new Error('Invalid async component module shape'); return m.default || m; } catch (e) { console.error('Lazy component failed:', e); return FallbackComponent; }

Prevention

When it happens

Trigger: Async component definitions such as Vue.component('x', () => loadX()) or router route.component: () => import(...) whose promise resolves to a string, undefined, null, number, or a module object without a usable default/component export.

Common situations: Dynamic import of a file that only exports named helpers; CommonJS interop where module.exports was overwritten with a non-component value; a bundler returning an empty namespace object consumed as-is when the actual component is on m.default; renamed/moved files leaving the loader pointing at a stub.

Related errors

AI-assisted analysis of OrchardCMS/OrchardCore@4306c0717f (2026-09-13). Data as JSON: /api/errors/f85cd3657507feeb. Report an issue: GitHub.

Appendix: source

Thrown at src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Vendor/vue-2.7.16/vue.runtime.js:3235

                      else {
                          throw err;
                      }
                  })
                      .then(function (comp) {
                      if (thisRequest !== pendingRequest && pendingRequest) {
                          return pendingRequest;
                      }
                      if (!comp) {
                          warn("Async component loader resolved to undefined. " +
                              "If you are using retry(), make sure to return its return value.");
                      }
                      // interop module default
                      if (comp &&
                          (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) {
                          comp = comp.default;
                      }
                      if (comp && !isObject(comp) && !isFunction(comp)) {
                          throw new Error("Invalid async component load result: ".concat(comp));
                      }
                      return comp;
                  })));
      };
      return function () {
          var component = load();
          return {
              component: component,
              delay: delay,
              timeout: timeout,
              error: errorComponent,
              loading: loadingComponent
          };
      };
  }

  function createLifeCycle(hookName) {
      return function (fn, target) {

View on GitHub (pinned to 4306c0717f)