[Bug]: PDF.js v4.9.155 Not Working on Safari (macOS) with legacy build

[harishfalco]

Attach (recommended) or Link to PDF file

Issue: PDF.js v4.9.155 Not Working on Safari (macOS)

Problem Description

The 4.9.155 version of PDF.js does not function properly on Safari (macOS). After loading the pdf.mjs file from the generic-legacy build, the following error appears in the Safari console: SyntaxError: Unexpected token '{'

This error seems to stem from Safari's lack of support for static class fields, a feature introduced in ES2022. This is unexpected since the legacy build is supposed to ensure compatibility with older browsers.

---

Steps Taken

1. Followed the Building PDF.js section in the README.

   • Generated the legacy build using the command:

     npx gulp generic-legacy

   • Integrated the pdf.mjs file from the legacy build into the project.

2. Despite these steps, the error persists on Safari when attempting to render PDFs.

---

Observed Behavior

The legacy build includes modern JavaScript features, such as static class fields, which are unsupported by Safari. This contradicts the purpose of the legacy build.

Error Screenshots

---

Code Snippet

HTML

<script src="http://localhost:8080/src/pdf.mjs" type="module" id="sample"></script>

Javscript

const pdfjsLib = window.pdfjsLib;

pdfjsLib.GlobalWorkerOptions.workerSrc = `http://localhost:8080/src/pdf.worker.mjs`;

const blobUrl = URL.createObjectURL(imgFile);

const loadingTask = pdfjsLib.getDocument({
  url: blobUrl,
  disableAutoFetch: true,
  disableStream: true,
  isEvalSupported: false,
});

loadingTask.promise
  .then(async function (pdf) {
    const numPages = pdf.numPages;
    const renderedPages = new Array(numPages);

    const renderPage = async (pageNum) => {
      const page = await pdf.getPage(pageNum);
      const viewport = page.getViewport({ scale: 1.0 });
      const desiredWidth = fileContainer.offsetWidth;
      const scale = desiredWidth / viewport.width;
      const scaledViewport = page.getViewport({ scale: scale });
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const outputScale = window.devicePixelRatio || 1;

      canvas.style.width = "100%";
      canvas.style.height = "210%";
      canvas.width = Math.floor(scaledViewport.width * outputScale);
      canvas.height = Math.floor(scaledViewport.height * outputScale);

      context.scale(outputScale, outputScale);

      const renderContext = {
        canvasContext: context,
        viewport: scaledViewport,
      };

      await page.render(renderContext).promise;
      return canvas;
    };

    try {
      const renderPromises = Array.from({ length: numPages }, (_, i) =>
        renderPage(i + 1).then((canvas) => {
          renderedPages[i] = canvas;
        })
      );

      await Promise.all(renderPromises);

      renderedPages.forEach((canvas) => {
        pdfContainer.appendChild(canvas);
      });

      URL.revokeObjectURL(blobUrl);
    } catch (error) {
      sendErrorToSentry(error);
      showPDFError();
    }
  })
  .catch(function (error) {
    console.log("Error in PDF.js:", error);
    sendErrorToSentry(error);
  });

Previous Research

• Found a StackOverflow thread suggesting the use of a compatible.js file for broader browser compatibility.
• However, I could not locate a compatible.js file for PDF.js v4.9.155 on any CDN.
• Searched the project documentation and GitHub issues but found no relevant details about Safari-specific support for modern PDF.js versions.

Questions

• How can I ensure compatibility for PDF.js v4.9.155 with Safari?
• From which version of Safari is PDF.js officially supported?
• Is there an updated process to generate a legacy build that excludes ES2022+ features (like static class fields)?
• Can I use a transpiler ( like google clousre compiler ) to compile the code in older javascript format ?

Web browser and its version

Safari (on Mac) and Version : 16.3 (18614.4.6.1.6)

Operating system and its version

MacOS , version : 13.2.1 (22D68)

PDF.js version

4.9.155

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

1. Clone the PDF.js repository and set it up locally following the instructions in the Building PDF.js section of the README.
2. Generate a legacy build using the following command:

   npx gulp generic-legacy

3. Serve the generic-legacy build and include the pdf.mjs file in your project.
4. Use the provided JavaScript code snippet to load and render a PDF file in Safari (macOS).
5. Open Safari's developer console to observe the error.


### What is the expected behavior?

- The legacy build of PDF.js should avoid modern JavaScript features that are unsupported by older browsers, including Safari.

- The PDF file should load and render successfully without any syntax errors or runtime issues in Safari.

### What went wrong?

1. The legacy build still includes modern ES2022+ features, such as static class fields, which Safari does not support.


### Link to a viewer

_No response_

### Additional context

_No response_