[Bug]: Internal server error: DOMMatrix is not defined #19847

jpetersam · 2025-04-22T23:17:45Z

jpetersam
Apr 22, 2025

Attach (recommended) or Link to PDF file

The problem arises at import time, so the PDF never gets a chance to load.

Web browser and its version

Chrome Version 135.0.7049.85 (Official Build) (64-bit)

Operating system and its version

Windows 11

PDF.js version

5.1.91

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

Yes

Is a browser extension

No

Steps to reproduce the problem

I am not sure this is a duplicate of bug 19764 as I am running inside of a REACT application. However, the symptoms are identical. The DOMMatrix class seems to be required at import time and not execution time.

When I comment out the code, I can see the DOMMatrix is present when the window object becomes available. It's just that the window object is not available until after my component is executed. The question I have is - how do I keep PDFJS from requiring the DOMMatrix until execution time?

For completeness, I am using typescript and my import is simply: import pdfjs from "pdfjs-dist";

Any help would be greatly appreciated.

Thanks!

What is the expected behavior?

The PDFJS library becomes available for use within the application.

What went wrong?

Link to a viewer

No response

Additional context

No response

Answered by jpetersam

May 14, 2025

I'm running locally and my start is "react-router dev". I agree with @petero-dk that I am performing server-side rendering as the window object is not available at the time I was doing the import.

To resolve this, I dynamically imported the library when the component function is being executed. It looks roughly as follows:

// Define PDFJS...
let pdfjs: any | null = null;

/**
 * The document view.
 * 
 * @returns The document view.
 */
const DocumentView = (props: any) =>
{
    if (typeof window !== 'undefined')
    {
        // Import PDF.js...
        import("pdfjs-dist").then((pdfjsObject) =>
        {
            pdfjs = pdfjsObject;

            // Set the worker source...
          …

View full answer

pavelsavva · 2025-04-27T05:50:32Z

pavelsavva
Apr 27, 2025

Getting the same with Next.js

0 replies

petero-dk · 2025-05-02T18:20:20Z

petero-dk
May 2, 2025

I am guessing this is because your react application is being server rendered (especially you @pavelsavva) and the server render runs in a node process and not in a browser context, so it cannot use the default version of pdfjs-dist but should use the legacy version.

1 reply

jpetersam May 14, 2025
Author

I'm running locally and my start is "react-router dev". I agree with @petero-dk that I am performing server-side rendering as the window object is not available at the time I was doing the import.

To resolve this, I dynamically imported the library when the component function is being executed. It looks roughly as follows:

// Define PDFJS...
let pdfjs: any | null = null;

/**
 * The document view.
 * 
 * @returns The document view.
 */
const DocumentView = (props: any) =>
{
    if (typeof window !== 'undefined')
    {
        // Import PDF.js...
        import("pdfjs-dist").then((pdfjsObject) =>
        {
            pdfjs = pdfjsObject;

            // Set the worker source...
            pdfjs.GlobalWorkerOptions.workerSrc = "pdf.worker.min.mjs";
        });
    }


    // Load the document
    useEffect(() =>
    {

        // Do anything that needs PDFS defined in here (i.e. render to the canvas...)

    }, [pdfjs ]);

    return (
        <Fragment>
                Insert HTML here (i.e. create your canvas with your reference)
        </Fragment>
    );
}

Hopefully this helps someone else out.

Answer selected by jpetersam

urakozz · 2025-05-10T19:32:08Z

urakozz
May 10, 2025

In my case tests (vitest) are failing with this error after upgrade to the v5.

I solved by using legacy import in the vite.config.mts as following

        resolve: {
            alias: [
                // ...
                ...(isTest ? [{ find: "pdfjs-dist", replacement: "pdfjs-dist/legacy/build/pdf.mjs" }] : []),
            ],
        },

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Bug]: Internal server error: DOMMatrix is not defined #19847

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

[Bug]: Internal server error: DOMMatrix is not defined #19847

Uh oh!

jpetersam Apr 22, 2025

Attach (recommended) or Link to PDF file

Web browser and its version

Operating system and its version

PDF.js version

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

Is a browser extension

Steps to reproduce the problem

What is the expected behavior?

What went wrong?

Link to a viewer

Additional context

Replies: 3 comments · 1 reply

Uh oh!

pavelsavva Apr 27, 2025

Uh oh!

petero-dk May 2, 2025

Uh oh!

Uh oh!

jpetersam May 14, 2025 Author

Uh oh!

Uh oh!

urakozz May 10, 2025

jpetersam
Apr 22, 2025

Replies: 3 comments 1 reply

pavelsavva
Apr 27, 2025

petero-dk
May 2, 2025

jpetersam May 14, 2025
Author

urakozz
May 10, 2025