OrchardCMS/OrchardCore · error · Error

Standalone host is missing a <div id="media-gallery"> mount…

Error message

Standalone host is missing a <div id="media-gallery"> mount point.

What it means

The mount() function of the standalone media gallery requires an element with id 'media-gallery' in the host document to attach the Vue app. If document.getElementById('media-gallery') returns null, it throws this Error before creating the app. This is a DOM contract between the host page and the bundle.

Solutions

  1. Add <div id="media-gallery"></div> to the host page HTML.
  2. Load the script with defer or at the end of <body> so the DOM exists when it runs.
  3. Fix the id spelling/case to exactly 'media-gallery'.
  4. Optionally create the container in JS if absent instead of throwing.

Example fix

<!-- before -->
<script src="/mediagallery/standalone.js"></script>
<!-- after -->
<div id="media-gallery"></div>
<script defer src="/mediagallery/standalone.js"></script>
Defensive patterns

Strategy: type-guard

Validate before calling

// Ensure the mount point exists before loading the bundle
if (!document.getElementById('media-gallery')) {
  const div = document.createElement('div'); div.id = 'media-gallery'; document.body.appendChild(div);
}

Type guard

function hasMountPoint(): boolean {
  return document.getElementById('media-gallery') !== null;
}

Try / catch

try { bootstrap(); }
catch (err) { if (String(err).includes('mount point')) { /* inject the div and retry, or show an error banner */ } throw err; }

Prevention

When it happens

Trigger: Loading the standalone bundle on a page whose HTML lacks <div id="media-gallery">, or loading the bundle before the DOM element exists (script executed in <head> without defer).

Common situations: Custom host pages forgetting the mount div; typos in the id; scripts bundled with wrong injection settings that execute before body renders; using the standalone bundle inside the admin page that uses a different container id.

Understand the failure class

Background: "not installed", "pip install", "required for": how missing-dependency errors surface across open-source libraries — this error's family across 34 libraries.

Related errors

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

Appendix: source

Thrown at src/OrchardCore.Modules/OrchardCore.Media/Assets/media-gallery/src/standalone.ts:64

async function loadTranslations(apiBaseUrl: string): Promise<string> {
  try {
    // Default fetch caching: the endpoint serves Cache-Control/ETag, so repeat loads hit the
    // browser cache or revalidate to a 304 instead of re-downloading the label set every boot.
    const base = apiBaseUrl.endsWith("/") ? apiBaseUrl : `${apiBaseUrl}/`;
    const response = await fetch(`${base}api/media/localizations`);
    if (response.ok) {
      return JSON.stringify(await response.json());
    }
  } catch {
    // Endpoint unreachable — fall back to empty (labels use their built-in fallbacks where present).
  }
  return "{}";
}

function mount(config: IMediaRuntimeConfig, translations: string, signalrEnabled: boolean): void {
  const container = document.getElementById("media-gallery");
  if (!container) {
    throw new Error('Standalone host is missing a <div id="media-gallery"> mount point.');
  }

  const app = createApp({
    name: "media-standalone",
    render: () =>
      h(AppComponent, {
        // Inject the resolved two-origin config; App.vue uses it instead of resolving from attributes.
        runtimeConfig: config,
        // basePath is required by App.vue but unused for config when runtimeConfig is provided.
        basePath: config.orchardBaseUrl,
        translations,
        uploadFilesUrl: `${config.apiBaseUrl}api/media/Upload`,
        maxUploadChunkSize: 0,
        allowMultipleSelection: true,
        // Real-time updates need the SignalR CORS surface on the Orchard origin; opt in via config.
        signalrEnabled: signalrEnabled ? "true" : "false",
      }),
  });

View on GitHub (pinned to 4306c0717f)