mozilla/pdf.js · error · Error

Invalid `container` and/or `viewer` option.

Error message

Invalid `container` and/or `viewer` option.

What it means

Thrown by the PDFViewer constructor (GENERIC build only) when the container or viewer element is not a <div>. The viewer relies on specific DIV structure to manage page views and scrolling.

Source

Thrown at web/pdf_viewer.js:325

  /**
   * @param {PDFViewerOptions} options
   */
  constructor(options) {
    const viewerVersion =
      typeof PDFJSDev !== "undefined" ? PDFJSDev.eval("BUNDLE_VERSION") : null;
    if (version !== viewerVersion) {
      throw new Error(
        `The API version "${version}" does not match the Viewer version "${viewerVersion}".`
      );
    }

    this.container = options.container;
    this.viewer = options.viewer || options.container.firstElementChild;
    this.#viewerAlert = options.viewerAlert || null;

    if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
      if (this.container?.tagName !== "DIV" || this.viewer?.tagName !== "DIV") {
        throw new Error("Invalid `container` and/or `viewer` option.");
      }

      if (
        this.container.offsetParent &&
        getComputedStyle(this.container).position !== "absolute"
      ) {
        throw new Error("The `container` must be absolutely positioned.");
      }
    }
    this.#resizeObserver.observe(this.container);

    this.eventBus = options.eventBus;
    this.linkService = options.linkService || new SimpleLinkService();
    this.downloadManager = options.downloadManager || null;
    this.findController = options.findController || null;
    this.#altTextManager = options.altTextManager || null;
    this.#commentManager = options.commentManager || null;
    this.#signatureManager = options.signatureManager || null;

View on GitHub (pinned to 5903d58d58)

Solutions

1. Ensure options.container is a <div> element and its firstElementChild (or options.viewer) is also a <div>.
2. Verify the DOM is ready and the selector returns the expected element before constructing PDFViewer.
3. Adopt the standard viewer markup structure from web/viewer.html.

Example fix

// before
new PDFViewer({ container: document.querySelector('section#viewer') });

// after
new PDFViewer({
  container: document.querySelector('div#viewerContainer'),
  viewer: document.querySelector('div#viewer'),
});

const container = document.querySelector('div#viewerContainer');
const viewer = document.querySelector('div#viewer');
if (container?.tagName === 'DIV' && viewer?.tagName === 'DIV') {
  new PDFViewer({ container, viewer });
}

function isDiv(el) {
  return el instanceof HTMLElement && el.tagName === 'DIV';
}

When it happens

Trigger: Passing options.container or options.viewer that is not a DIV (e.g. a <section>, or null/undefined where tagName check fails). Only enforced when PDFJSDev is undefined or GENERIC build.

Common situations: Custom HTML using a non-div container; container element not found (null) because selector missed; passing the wrong DOM node in options.

Related errors

• The `container` must be absolutely positioned.
• The API version "${version}" does not match the Viewer versi
• Unknown CMap name: ${name}
• Built-in CMap parameters are not provided.
• Failed to fetch file "${url}" with "${response.statusText}".

AI-assisted analysis of mozilla/pdf.js@5903d58d58 (2026-08-13). Data as JSON: /api/errors/83e5abaa8357e6d7. Report an issue: GitHub.