jackwener/OpenCLI · error · CommandExecutionError

Browser Bridge does not support Reference drag-and-drop

Error message

Browser Bridge does not support Reference drag-and-drop

What it means

CommandExecutionError thrown when the connected browser Bridge page object lacks a page.drag function. Reference upload via drag-and-drop requires the Bridge to expose drag support.

Source

Thrown at clis/midjourney/utils.js:1186

  // Uploading while the persistent composer retained a video state can leave
  // the library open beside Start/End Frame slots. Reassert image mode before
  // assigning image-generation references; End Frame intentionally stays in
  // the manual video composer.
  if (slot !== 'end') {
    await ensureImageComposer(page);
    await openImagePanel(page);
  }

  const label = slot === 'style'
    ? 'Style References'
    : slot === 'end'
      ? 'End Frame'
      : slot === 'image'
        ? 'Image Prompts'
        : 'Omni Reference';
  if (slot === 'omni' && selected.length !== 1) throw new ArgumentError('Omni Reference accepts exactly one local image');
  if (typeof page.drag !== 'function') throw new CommandExecutionError('Browser Bridge does not support Reference drag-and-drop');
  for (const url of selected) {
    await markReferenceTarget(page, url, label);
    await page.drag('[data-opencli-ref-source="1"]', '[data-opencli-ref-target="1"]');
    await page.wait(0.8);
    await verifyReferenceTarget(page, label);
  }
  return selected;
}

function normalizeButtonText(value) {
  return String(value || '').replace(/\s+/g, ' ').trim();
}

export async function clickCreationAction(page, text, occurrence = 0) {
  const target = unwrapEvaluateResult(await page.evaluate((label, wantedIndex) => {
    const visible = (element) => {
      const rect = element.getBoundingClientRect();
      const style = getComputedStyle(element);

View on GitHub (pinned to 49907e53dc)

Solutions

Update the Browser Bridge extension/client to a version that supports page.drag.
Ensure you pass the Bridge-wrapped page object, not a raw puppeteer Page.
Use the fallback file-input upload path (which dispatches events via evaluate).
Polyfill drag in tests by stubbing page.drag.

Example fix

// before
await uploadReferencesToSlot(rawPuppeteerPage, paths, 'style');
// after
const page = await bridge.attach(tabId);
if (typeof page.drag !== 'function') throw new Error('Bridge drag support required');
await uploadReferencesToSlot(page, paths, 'style');

Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof page.drag !== 'function') {
  console.warn('Bridge drag unavailable; using file-input fallback');
}

Type guard

function supportsDrag(page) { return typeof page?.drag === 'function'; }

Try / catch

try {
  await uploadReferencesToSlot(page, paths, 'style');
} catch (err) {
  if (String(err.message).includes('drag-and-drop')) {
    await fallbackUploadViaFileInput(page, paths);
  } else throw err;
}

Prevention

Check page.drag before choosing the upload path
Keep the Browser Bridge updated
Avoid passing raw puppeteer pages
Implement a file-input fallback path

When it happens

Trigger: Using a Bridge client/older version whose page wrapper does not implement drag; passing a plain puppeteer Page (which has no .drag) instead of the Bridge-wrapped page.

Common situations: Outdated browser Bridge extension; mixing libraries (raw puppeteer page); custom page mock in tests without a drag stub.

Related errors

AI-assisted analysis of jackwener/OpenCLI@49907e53dc (2026-08-29). Data as JSON: /api/errors/b1af290cf97db25d. Report an issue: GitHub.