[Bug]: Cannot read properties of undefined (reading 'createElement')

[adamdaly]

Attach (recommended) or Link to PDF file

I can't add a example of the PDFs I'm using because they are proprietary.

Web browser and its version

Chrome 126

Operating system and its version

OSX Ventura

PDF.js version

4.0.379

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

Yes

Is a browser extension

No

Steps to reproduce the problem

Make a call to the pdf.getPage.render method:

export const processUploadedPDF = async (file: File): Promise<string[]> => {
  try {
    const pagePreviews: string[] = [];
    const loadingTask = pdfjs.getDocument({ data: new Uint8Array(await file.arrayBuffer()) });
    const pdf = await loadingTask.promise;

    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      await page.render({
        canvasContext: context!,
        viewport: viewport,
        background: '#fff',
      }).promise;

      const base64Image = canvas.toDataURL('image/png');
      pagePreviews.push(base64Image);
    }

    return pagePreviews;
  } catch (error) {
    return [];
  }
};

What is the expected behavior?

pdf.getPage.render should not error and paint the pdf to the passed canvas context.

What went wrong?

An error is thrown:

TypeError: Cannot read properties of undefined (reading 'createElement')
    at DOMCanvasFactory._createCanvas (display_utils.js:383:35)
    at DOMCanvasFactory.create (base_factory.js:51:25)
    at CachedCanvases.getCanvas (canvas.js:203:40)
    at CanvasGraphics._scaleImage (canvas.js:1221:39)
    at CanvasGraphics.paintInlineImageXObject (canvas.js:2993:25)
    at CanvasGraphics.paintImageXObject (canvas.js:2891:10)
    at CanvasGraphics.executeOperatorList (canvas.js:1088:20)
    at InternalRenderTask._next (api.js:3389:37)
    at api.js:3378:14

The this in the line this._document.createElement("canvas"); is undefined.

Link to a viewer

No response

Additional context

We recently moved from Create React App to Vite and this issue was only noticed after that so it must have something to do with that.

This doesn't happen with all the PDFs we use but it happens on about 90% of them.

We use pdfjs installed from NPM and have the worker file in the public folder using:

pdfjs.GlobalWorkerOptions.workerSrc = new URL('/pdf-viewer/pdf.worker.js', import.meta.url).href;

to set up the GlobalWorkerOptions.workerSrc.

I tried updating to the latest version of PDFJS but got the same error.

[nicolo-ribaudo]

With no reproduction is really difficult to understand what's going on.

I suggest placing a breakpoint at

pdf.js/src/display/display_utils.js

Line 482 in ccad2f8

this._document = ownerDocument;

in your app, and figuring out why _document is set to undefined.

[Snuffleupagus]

Attach (recommended) or Link to PDF file

I can't add a example of the PDFs I'm using because they are proprietary.

Unfortunately that makes this issue, or any issue really, non-actionable.

Steps to reproduce the problem

Make a call to the pdf.getPage.render method:

Please see https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us in the Matrix room -- keep in mind that just code snippets won't help us troubleshoot the problem.

Additional context

We recently moved from Create React App to Vite and this issue was only noticed after that so it must have something to do with that.

In that case, this unfortunately seems unrelated to the PDF.js library.