Next.js and v9 on build Promise.withResolvers #1811

Kasui92 · 2024-06-01T07:58:08Z

Before you start - checklist

I followed instructions in documentation written for my React-PDF version
I have checked if this bug is not already reported
I have checked if an issue is not listed in Known issues
If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I'm trying to implement the library in a Next.js 14.2.3 (App Router) project without turbopack, however when I go to use the proposed examples it reports the error in the title directly in the console during development or when it's launched the build command.

Having to use Node 20 because Vercel doesn't support 22, I immediately adopted legacy mode to solve the problem... but with poor results.

I also installed core-js and imported directly into the layout in root, but although it solves the error during development, it gives me an error when I build the app.

Can I ask if I'm missing any steps?

Steps to reproduce

Install Next.js App
Install React-Pdf v9
Install core-js
Use the files in information paragragh
Try to build

Expected behavior

The build command should work.

Actual behavior

The build command reports an error "failed to parse input file" or "Promise.withResolvers" if core-js is not installed.

Additional information

/src/app/layout.js

import 'core-js/full/promise/with-resolvers'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <main >{children}</main>
            </body>
        </html>
    )
}

/src/app/page.js

import PdfViewer from './_components/PdfViewer'

export default async function ReactPDF() {
    return (
        <div>
                    <PdfViewer />
        </div>
    )
}

/src/app/PdfViewer.js

'use client'

import { useCallback, useState } from 'react'
import { pdfjs, Document, Page } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url).toString()

const options = {
    cMapUrl: '/cmaps/',
    standardFontDataUrl: '/standard_fonts/',
}

const maxWidth = 800

export default function PdfViewer() {
    const [file, setFile] = useState('./sample.pdf')
    const [numPages, setNumPages] = useState()
    const [containerRef, setContainerRef] = useState(null)
    const [containerWidth, setContainerWidth] = useState()

    const onResize = useCallback((entries) => {
        const [entry] = entries

        if (entry) {
            setContainerWidth(entry.contentRect.width)
        }
    }, [])

    function onFileChange(event) {
        const { files } = event.target

        const nextFile = files?.[0]

        if (nextFile) {
            setFile(nextFile)
        }
    }

    function onDocumentLoadSuccess({ numPages: nextNumPages }) {
        setNumPages(nextNumPages)
    }

    return (
        <div className="Example">
            <div className="Example__container">
                <div className="Example__container__document" ref={setContainerRef}>
                    <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
                        {Array.from(new Array(numPages), (el, index) => (
                            <Page
                                key={`page_${index + 1}`}
                                pageNumber={index + 1}
                                width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
                            />
                        ))}
                    </Document>
                </div>
            </div>
        </div>
    )
}

The example PDF is the same one used in the sample, placed in /public.

Environment

React-PDF version: v9.0.0
React version: 18.3.1
Node version: 20.14.0

The text was updated successfully, but these errors were encountered:

lucaslosi · 2024-06-04T17:30:06Z

downgrading to 8.0.2 solved the issue

craigcartmell · 2024-06-05T16:25:12Z

Also seeing this issue on Next 14 during the build process.

8.0.2 has a high security vulnerability due to referencing pdfjs-dist@3.11.174, so it's not a great workaround.

vpsk · 2024-06-06T05:00:18Z

I was able to resolve the issue by setting the dynamic component to load without server-side rendering (SSR).
const PdfViewerComponent = dynamic(() => import("./PdfViewer"), { ssr: false, });

and make sure in next.config.js enable this
config.resolve.alias.canvas = false;

craigcartmell · 2024-06-06T07:56:51Z

I was able to resolve the issue by setting the dynamic component to load without server-side rendering (SSR). const PdfViewerComponent = dynamic(() => import("./PdfViewer"), { ssr: false, });

and make sure in next.config.js enable this config.resolve.alias.canvas = false;

Which version of Next/React-PDF are you using?

Would you be able to paste your full component please?

wojtekmaj · 2024-06-06T10:37:16Z

All,
please kindly see the updated samples:

and see updated upgrade guide for workarounds:

craigcartmell · 2024-06-06T11:07:12Z

@wojtekmaj - I think the upgrade guide should read: experimental.esmExternals: 'loose', not experiments.

NikkiHess · 2024-06-08T06:14:52Z

Regarding the workarounds... I'm unsure how to use the polyfill for Promise.withResolvers. Is there a guide somewhere on how to do this for react-pdf?

justinfarrelldev · 2024-06-10T06:02:44Z

I'm also experiencing this on Remix v2.9.1. Trying to polyfill Promise.withResolvers now

Edit: It seems that the error is coming from within the worker itself, making this difficult to polyfill. I have tried to place a polyfill both in the root as well as in the client component where I have included the worker, but neither worked for me.

wojtekmaj · 2024-06-10T09:07:48Z

Perhaps using a legacy worker would help? 🤔

justinfarrelldev · 2024-06-10T09:44:09Z

Perhaps using a legacy worker would help? 🤔

I tried using a legacy worker, but sadly that did not help. That being said, the following polyfill worked like a charm:

// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === 'undefined') {
    if (window)
        // @ts-expect-error This does not exist outside of polyfill which this is doing
        window.Promise.withResolvers = function () {
            let resolve, reject;
            const promise = new Promise((res, rej) => {
                resolve = res;
                reject = rej;
            });
            return { promise, resolve, reject };
        };
}

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url
).toString();

Once I added this, it worked fantastically! 😁

fate7bardiche · 2024-06-15T17:22:25Z

I referred to this commit and used a polyfill from core-js.
Commit that added the polyfill

As a result, I was able to make it work.

If core-js is available, this method might also work.

Node.js 19.7.0
"core-js": "^3.37.1"
"react-pdf": "^9.0.0"

justinwaite · 2024-06-16T02:36:40Z

Perhaps using a legacy worker would help? 🤔

I tried using a legacy worker, but sadly that did not help. That being said, the following polyfill worked like a charm:

// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === 'undefined') {
    if (window)
        // @ts-expect-error This does not exist outside of polyfill which this is doing
        window.Promise.withResolvers = function () {
            let resolve, reject;
            const promise = new Promise((res, rej) => {
                resolve = res;
                reject = rej;
            });
            return { promise, resolve, reject };
        };
}

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url
).toString();

Once I added this, it worked fantastically! 😁

@justinfarrelldev Where did you add this specifically? I assumed adding to entry.client would be the place, but that didn't resolve it for me.

justinfarrelldev · 2024-06-16T05:57:07Z

Perhaps using a legacy worker would help? 🤔

I tried using a legacy worker, but sadly that did not help. That being said, the following polyfill worked like a charm:
// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === 'undefined') {
    if (window)
        // @ts-expect-error This does not exist outside of polyfill which this is doing
        window.Promise.withResolvers = function () {
            let resolve, reject;
            const promise = new Promise((res, rej) => {
                resolve = res;
                reject = rej;
            });
            return { promise, resolve, reject };
        };
}

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url
).toString();
Once I added this, it worked fantastically! 😁
@justinfarrelldev Where did you add this specifically? I assumed adding to entry.client would be the place, but that didn't resolve it for me.

Sorry, I could have been more clear - I put this snippet in the component where the Document and Page tags are (IE, the component used to show the PDF - I called it pdfViewer.client.tsx).

For more context, I also imported the TextLayer.css and AnnotationLayer.css within this file (at the top, as imports) as well as the worker src.

Basically, almost all react-pdf logic is isolated within this client component. I'll post the source code shortly (and edit this comment when I do).

Edit:
Here's the source that works for me (this file is pdfViewer.client.tsx). Yes, my JSDoc is badly out of date (it was generated with Hygen boilerplate and I haven't updated it). Note that the memoization is to prevent re-renders of the PDF Viewer (causing it to load the PDF again):

/*
    Description: The viewer for pdfs. Needs a buffer to render
*/
import React, { FC, useMemo } from 'react';
import { pdfjs, Document, Page } from 'react-pdf';
import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === 'undefined') {
    if (window)
        // @ts-expect-error This does not exist outside of polyfill which this is doing
        window.Promise.withResolvers = function () {
            let resolve, reject;
            const promise = new Promise((res, rej) => {
                resolve = res;
                reject = rej;
            });
            return { promise, resolve, reject };
        };
}

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url
).toString();

type Props = {
    buffer: { data: Buffer };
};

/**
 * The viewer for pdfs. Needs a buffer to render
 *
 * @param {Props} param0
 * @param {string} param0.children The children of this component.
 * @returns {React.ReactElement}
 */
export const PdfViewer: FC<Props> = ({ buffer }: Props): React.ReactElement => {
    const memoizedFile = useMemo(() => buffer.data, [buffer.data]); // Depend on buffer.data assuming buffer.data is stable and only changes if actual data changes

    // Memoize the file object to prevent unnecessary re-renders
    const fileProp = useMemo(() => ({ data: memoizedFile }), [memoizedFile]);

    return (
        <div>
            <Document
                file={fileProp}
                onLoadError={(err) =>
                    console.error(`Loading error from PDF viewer: ${err}`)
                }
                onLoadStart={() => console.log('Started loading pdf')}
                onLoadSuccess={(pdf) =>
                    console.log('Successfully loaded pdf:', pdf)
                }
            >
                <Page pageIndex={0} />
            </Document>
        </div>
    );
};

adrianbienias · 2024-06-23T14:36:55Z

The issue is still present.

After running the example app
https://github.com/wojtekmaj/react-pdf/tree/main/sample/next-app

I'm getting error in the console
TypeError: Promise.withResolvers is not a function

Using the proposed polyfills doesn't seem to solve it.

justinfarrelldev · 2024-06-23T16:03:19Z

The issue is still present.

After running the example app
https://github.com/wojtekmaj/react-pdf/tree/main/sample/next-app

I'm getting error in the console
TypeError: Promise.withResolvers is not a function

Using the proposed polyfills doesn't seem to solve it.

Try adding an "else" to the polyfill I posted above and then using "global" instead of window within that else statement. That should help to handle SSR

adrianbienias · 2024-06-23T17:16:25Z

if (typeof Promise.withResolvers === "undefined") {
  if (window) {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    window.Promise.withResolvers = function () {
      let resolve, reject
      const promise = new Promise((res, rej) => {
        resolve = res
        reject = rej
      })
      return { promise, resolve, reject }
    }
  } else {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    global.Promise.withResolvers = function () {
      let resolve, reject
      const promise = new Promise((res, rej) => {
        resolve = res
        reject = rej
      })
      return { promise, resolve, reject }
    }
  }
}

Nothing changes, the same error occurs.

I also tried 2ba89d8 with the same result

maxess3 · 2024-06-23T17:37:30Z

I referred to this commit and used a polyfill from core-js. Commit that added the polyfill

As a result, I was able to make it work.

If core-js is available, this method might also work.

Node.js 19.7.0

"core-js": "^3.37.1"

"react-pdf": "^9.0.0"

Thank you, It works for me with the same configuration.

siinghd · 2024-06-23T23:25:18Z

Any update on this?, none of above worked for me

Ori2846 · 2024-06-25T00:48:23Z

Loading a Polyfill and putting import './polyfills.mjs'; at the top of my next.config.mjs worked for me. This made Promise.withResolvers available in both browser and server environments.

Here's the code I used:

import 'core-js/full/promise/with-resolvers.js';

// Polyfill for environments where window is not available (e.g., server-side rendering)
if (typeof Promise.withResolvers === 'undefined') {
  if (typeof window !== 'undefined') {
    window.Promise.withResolvers = function () {
      let resolve, reject;
      const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
      });
      return { promise, resolve, reject };
    };
  } else {
    global.Promise.withResolvers = function () {
      let resolve, reject;
      const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
      });
      return { promise, resolve, reject };
    };
  }
}

DonikaV · 2024-07-02T15:13:08Z

Updated to latest one 9.1.0 and now getting this error, downgraded and still same :|
Basically every time when I update version I getting some errors...

ldiqual · 2024-07-03T17:48:04Z

Super hacky, but this is how we added the polyfill to the pdfjs worker itself, in vite.config.ts:

function transformPdfJsWorker(): Plugin {
  return {
    name: 'transform-pdf-js-worker',
    generateBundle(options, bundle) {
      for (const [fileName, chunkOrAsset] of Object.entries(bundle)) {
        if (!fileName.includes('pdf.worker') || chunkOrAsset.type !== 'asset') {
          continue
        }
        const prepend = Buffer.from(
          `if (typeof Promise.withResolvers === "undefined") {
            Promise.withResolvers = function () {
              let resolve, reject
              const promise = new Promise((res, rej) => {
                resolve = res
                reject = rej
              })
              return { promise, resolve, reject }
            }
          }
          `,
          'utf-8'
        )
        const sourceBuffer = Buffer.isBuffer(chunkOrAsset.source)
          ? chunkOrAsset.source
          : Buffer.from(chunkOrAsset.source)
        chunkOrAsset.source = Buffer.concat([prepend, sourceBuffer])
      }
    },
  }
}

export default defineConfig({
  plugins: [
    transformPdfJsWorker(),
  ],
})

allicanseenow · 2024-07-04T05:02:00Z

if (typeof Promise.withResolvers === "undefined") {
  if (window) {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    window.Promise.withResolvers = function () {
      let resolve, reject
      const promise = new Promise((res, rej) => {
        resolve = res
        reject = rej
      })
      return { promise, resolve, reject }
    }
  } else {
    // @ts-expect-error This does not exist outside of polyfill which this is doing
    global.Promise.withResolvers = function () {
      let resolve, reject
      const promise = new Promise((res, rej) => {
        resolve = res
        reject = rej
      })
      return { promise, resolve, reject }
    }
  }
}

Nothing changes, the same error occurs.

I also tried 2ba89d8 with the same result

This works for me if I put the polyfill in _app.tsx. It works in both local and production.

gabsoftware · 2024-07-05T07:18:43Z

For anyone still struggling with this. Don't bother loading polyfills yourself, it will not work.

You have to load the Legacy version of PdjJS worker which is already polyfilled. See https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

Like so:

import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

gabsoftware · 2024-07-05T15:09:48Z

Okay, so after a few tests, you still have to polyfill Promise.withResolvers because react-pdf uses non-legacy pdf.mjs even if you choose the legacy pdf worker.
So legacy pdf worker + polyfilled Promise.withResolvers + react-pdf works as intended.

aldwnesx · 2024-07-07T13:25:06Z

Getting the same error:

 ○ Compiling / ...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ✓ Compiled / in 673ms (567 modules)
 ⨯ TypeError: Promise.withResolvers is not a function
    at __webpack_require__ (/Users/al/Documents/GitHub/test/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:8:67)
    at (ssr)/./app/page.tsx (/Users/al/Documents/GitHub/test/frontend/.next/server/app/page.js:173:1)
    at Object.__webpack_require__ [as require] (/Users/al/Documents/GitHub/test/frontend/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
digest: "1833689360"

For anyone still struggling with this. Don't bother loading polyfills yourself, it will not work.

You have to load the Legacy version of PdjJS worker which is already polyfilled. See https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

Like so:
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

DonikaV · 2024-07-19T07:24:22Z

@wojtekmaj Hey, sorry, is there any proper solution for this error?
pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs;

and this
import 'core-js/actual/promise';

Doesnt help. The latest version of Chrome and nextjs 14.2.5 and this error.

jesus-maryapp · 2024-08-10T10:59:41Z

For anyone struggling with remix (v2.10.2 and nodejs 20 LTS).

This worked for me: I created a promisePolyfill.ts util function then imported it at the very top of the file that imports everything related to react-pdf or pdfjs-dist.

//promisePolyfill.ts
if (typeof Promise.withResolvers !== "function") {
  Promise.withResolvers = function <T>() {
    let resolve!: (value: T | PromiseLike<T>) => void;
    let reject!: (reason?: any) => void;
    const promise = new Promise<T>((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

export {};

//yourfile.client.tsx
import "~/utils/promisePolyfill";
import { useCallback, useRef, useState } from "react";
import { useResizeObserver } from "@wojtekmaj/react-hooks";
import { pdfjs, Document, Page } from "react-pdf";

import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import { PDFToolbar } from "./pdfToolbar";
import { LoaderCircle } from "lucide-react";
import { IPDFViewerProps } from "~/types/pdfViewerTypes";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "/pdf.worker.min.mjs",
  import.meta.url,
).toString();

Do make sure that that your file is only rendering on the client side, so rename your file to : file.client.tsx

Also if you have issues with the typing for the promise polyfill remember to create your global.d.ts for it:

interface PromiseConstructor {
  withResolvers<T>(): {
    promise: Promise<T>;
    resolve: (value: T | PromiseLike<T>) => void;
    reject: (reason?: any) => void;
  };
}

ssxdev · 2024-08-12T20:56:02Z

page.tsx:

const PDFViewer = dynamic(
  () => import('./pdf-viewer').then(mod => mod.PDFViewer),
  { ssr: false }
)

pdf-viewer.tsx

"use client"

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

export function PDFViewer() {
  return (
    <Document>
      <Page />
    </Document>
  )

oaitbaziz · 2024-08-13T13:07:43Z

It fixed my tests execution which was failing since I added react-pdf to my project.

I've tried all solutions above nothing worked until I found your solution, thank you!

Dmytro-Uchkin-Ytree · 2024-08-14T12:44:57Z

@wojtekmaj The issue is still reproducible in some cases
Chrome: 127
React: 18.2.0

The issue is related to pdf.js dependency.
https://github.com/mozilla/pdf.js/issues?q=withResolvers

Dmytro-Uchkin-Ytree · 2024-08-14T15:41:41Z

@wojtekmaj The issue is still reproducible in some cases Chrome: 127 React: 18.2.0

The issue is related to pdf.js dependency. https://github.com/mozilla/pdf.js/issues?q=withResolvers

UPDATE:
Tuned out Promise.withResolvers was overwritten by Zone.js (angular) (ZoneAwarePromise) Promise class whose old implementation does Not have withResolvers method.

Solution would be updating conflicting dependancies, especially if you're using Angular

dsternlicht · 2024-08-15T11:04:28Z

This works for me

put this in the component where you use the Document component

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

Add this on the page.tsx of the route.


if (typeof Promise.withResolvers === "undefined") {
    if (typeof window !== 'undefined') {
      // @ts-expect-error This does not exist outside of polyfill which this is doing
      window.Promise.withResolvers = function () {
        let resolve, reject
        const promise = new Promise((res, rej) => {
          resolve = res
          reject = rej
        })
        return { promise, resolve, reject }
      }
    } else {
      // @ts-expect-error This does not exist outside of polyfill which this is doing
      global.Promise.withResolvers = function () {
        let resolve, reject
        const promise = new Promise((res, rej) => {
          resolve = res
          reject = rej
        })
        return { promise, resolve, reject }
      }
    }
  }

Worked for me as well. Thanks!

Bfaschat · 2024-08-19T14:20:50Z

Just wanted to throw some observations I discovered while testing this, For those still facing this issue while using react + Next JS Pages + Promise.withResolvers bypass

If you are planning to host your project on Vercel or any other hosting that doesn't have node 22.x support yet, below is the working solution.

@Kasui92 this error occurs because Vercel currently defaults to Node.js 20.x, while Promise.withResolvers() is available only in Node.js 22.x or later.

My project config uses the below packages:

React version: 18.3.1
Next.js version: 14.2.5
Node.js version: v20.x
react-pdf version: 9.1.0
core-js version: 3.38.0

Here’s a polyfill solution for Promise.withResolvers() in both TypeScript and JavaScript:

TypeScript:

// utils/polyfilsResolver.tsx

/**
 * Polyfill for Promise.withResolvers if it's not available.
 */
 
export type PromiseWithResolvers<T> = {
  promise: Promise<T>;
  resolve: (value: T | PromiseLike<T>) => void;
  reject: (reason?: any) => void;
};

export function polyfillPromiseWithResolvers() {
  if (!Promise.withResolvers) {
    Promise.withResolvers = function <T>(): PromiseWithResolvers<T> {
      let resolve: (value: T | PromiseLike<T>) => void;
      let reject: (reason?: any) => void;

      const promise = new Promise<T>((res, rej) => {
        resolve = res;
        reject = rej;
      });

      return { promise, resolve: resolve!, reject: reject! };
    };
  }
}

Javascript

// utils/polyfilsResolver.js

/**
 * Polyfill for Promise.withResolvers if it's not available.
 */
export function polyfillPromiseWithResolvers() {
    if (!Promise.withResolvers) {
      Promise.withResolvers = function () {
        let resolve;
        let reject;
  
        const promise = new Promise((res, rej) => {
          resolve = res;
          reject = rej;
        });
  
        return { promise, resolve, reject };
      };
    }
  }

Now You can call polyfillPromiseWithResolvers() from _app.js or _app.jsx like below

// pages/_app.js or pages/_app.jsx

import { polyfillPromiseWithResolvers } from "@/utils/polyfilsResolver";

import 'core-js/full/promise/with-resolvers.js';

polyfillPromiseWithResolvers();

Now lets use the legacy version of react-pdf as the final touch

// Pdfviewer component 

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;

Finally, lets build it for production to test

npm run build

Note: This is a working solution that i use on my active projects. It works 100% on vercel and other hostings that doesn't support node 20.x

Enjoy XD 💯

Kasui92 · 2024-08-19T14:29:42Z

@Bfaschat
Oh, sounds like it's good for my case!

Thank you for the comments and the working solution!

Bfaschat · 2024-08-19T15:03:15Z

@Bfaschat Oh, sounds like it's good for my case!

Thank you for the comments and the working solution!

Merci <3

Bfaschat · 2024-08-20T14:02:43Z

Just wanted to throw some observations I discovered while testing this, For those still facing this issue while using react + Next JS Pages + Promise.withResolvers bypass

Typescript Demo

Javascript Demo

If you are planning to host your project on Vercel or any other hosting that doesn't have node 22.x support yet, below is the working solution.

@Kasui92 this error occurs because Vercel currently defaults to Node.js 20.x, while Promise.withResolvers() is available only in Node.js 22.x or later.

My project config uses the below packages:

React version: 18.3.1

Next.js version: 14.2.5

Node.js version: v20.x

react-pdf version: 9.1.0

core-js version: 3.38.0

Here’s a polyfill solution for Promise.withResolvers() in both TypeScript and JavaScript:

TypeScript:
// utils/polyfilsResolver.tsx

/**
 * Polyfill for Promise.withResolvers if it's not available.
 */
 
export type PromiseWithResolvers<T> = {
  promise: Promise<T>;
  resolve: (value: T | PromiseLike<T>) => void;
  reject: (reason?: any) => void;
};

export function polyfillPromiseWithResolvers() {
  if (!Promise.withResolvers) {
    Promise.withResolvers = function <T>(): PromiseWithResolvers<T> {
      let resolve: (value: T | PromiseLike<T>) => void;
      let reject: (reason?: any) => void;

      const promise = new Promise<T>((res, rej) => {
        resolve = res;
        reject = rej;
      });

      return { promise, resolve: resolve!, reject: reject! };
    };
  }
}
Javascript
// utils/polyfilsResolver.js

/**
 * Polyfill for Promise.withResolvers if it's not available.
 */
export function polyfillPromiseWithResolvers() {
    if (!Promise.withResolvers) {
      Promise.withResolvers = function () {
        let resolve;
        let reject;
  
        const promise = new Promise((res, rej) => {
          resolve = res;
          reject = rej;
        });
  
        return { promise, resolve, reject };
      };
    }
  }
Now You can call polyfillPromiseWithResolvers() from _app.js or _app.jsx like below
// pages/_app.js or pages/_app.jsx

import { polyfillPromiseWithResolvers } from "@/utils/polyfilsResolver";

import 'core-js/full/promise/with-resolvers.js';

polyfillPromiseWithResolvers();
Now lets use the legacy version of react-pdf as the final touch
// Pdfviewer component 

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
Finally, lets build it for production to test

npm run build

Note: This is a working solution that i use on my active projects. It works 100% on vercel and other hostings that doesn't support node 20.x

Enjoy XD 💯

Hey everyone :) Make sure you are running npm run build or yarn run build using node 20.x not 22.x

Trying to use Node 22.x gives a new error, i didn't have time to debug it so i defaulted back to 20.x

I hope my solution above works as expected

Happy coding

robiulhr · 2024-08-24T18:42:56Z

Perhaps using a legacy worker would help? 🤔

I tried using a legacy worker, but sadly that did not help. That being said, the following polyfill worked like a charm:

// @ts-expect-error This does not exist outside of polyfill which this is doing
if (typeof Promise.withResolvers === 'undefined') {
    if (window)
        // @ts-expect-error This does not exist outside of polyfill which this is doing
        window.Promise.withResolvers = function () {
            let resolve, reject;
            const promise = new Promise((res, rej) => {
                resolve = res;
                reject = rej;
            });
            return { promise, resolve, reject };
        };
}

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url
).toString();

Once I added this, it worked fantastically! 😁

This worked for me.

zeeklog · 2024-09-02T09:59:51Z

Super hacky, but this is how we added the polyfill to the pdfjs worker itself, in vite.config.ts:

function transformPdfJsWorker(): Plugin {
  return {
    name: 'transform-pdf-js-worker',
    generateBundle(options, bundle) {
      for (const [fileName, chunkOrAsset] of Object.entries(bundle)) {
        if (!fileName.includes('pdf.worker') || chunkOrAsset.type !== 'asset') {
          continue
        }
        const prepend = Buffer.from(
          `if (typeof Promise.withResolvers === "undefined") {
            Promise.withResolvers = function () {
              let resolve, reject
              const promise = new Promise((res, rej) => {
                resolve = res
                reject = rej
              })
              return { promise, resolve, reject }
            }
          }
          `,
          'utf-8'
        )
        const sourceBuffer = Buffer.isBuffer(chunkOrAsset.source)
          ? chunkOrAsset.source
          : Buffer.from(chunkOrAsset.source)
        chunkOrAsset.source = Buffer.concat([prepend, sourceBuffer])
      }
    },
  }
}

export default defineConfig({
  plugins: [
    transformPdfJsWorker(),
  ],
})

Excellent!!! It worked for me.

Alwaz · 2024-09-07T18:25:00Z

I was able to resolve the issue by setting the dynamic component to load without server-side rendering (SSR). const PdfViewerComponent = dynamic(() => import("./PdfViewer"), { ssr: false, });

and make sure in next.config.js enable this config.resolve.alias.canvas = false;

Thankyouuu soo muchhh you saved me!!!

luuknnh · 2024-09-17T12:51:04Z

page.tsx:

const PDFViewer = dynamic(
  () => import('./pdf-viewer').then(mod => mod.PDFViewer),
  { ssr: false }
)

pdf-viewer.tsx

"use client"

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

export function PDFViewer() {
  return (
    <Document>
      <Page />
    </Document>
  )

This still doesn't work for me when I use Nextjs 14.2.11 :(

When I run npm run build I get a craaazy long error with lots of whitespace and this on the bottom:
`----

Caused by:
0: failed to parse input file
1: Syntax Error

Build failed because of webpack errors

rlawnsrud0509 · 2024-09-20T06:22:03Z

페이지.tsx:
const PDFViewer = dynamic(
  () => import('./pdf-viewer').then(mod => mod.PDFViewer),
  { ssr: false }
)
pdf-뷰어.tsx
"use client"

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

export function PDFViewer() {
  return (
    <Document>
      <Page />
    </Document>
  )
Nextjs 14.2.11을 사용해도 여전히 작동하지 않아요 :(

npm run build를 실행하면 공백이 많은 엄청나게 긴 오류가 발생하고 하단에 다음과 같은 내용이 표시됩니다. `----

원인: 0: 입력 파일 구문 분석 실패 1: 구문 오류

webpack 오류로 인해 빌드가 실패했습니다.

add this code to next.config.mjs

webpack: (config) => {
    config.optimization.minimize = false;

    return config;
},

Bumboobee · 2024-09-27T13:54:09Z

if (typeof Promise.withResolvers === "undefined") {
if (typeof window !== 'undefined') {
// @ts-expect-error This does not exist outside of polyfill which this is doing
window.Promise.withResolvers = function () {
let resolve, reject
const promise = new Promise((res, rej) => {
resolve = res
reject = rej
})
return { promise, resolve, reject }
}
} else {
// @ts-expect-error This does not exist outside of polyfill which this is doing
global.Promise.withResolvers = function () {
let resolve, reject
const promise = new Promise((res, rej) => {
resolve = res
reject = rej
})
return { promise, resolve, reject }
}
}
}

After many tried so hard with the previous answers and the error still remaning, @armanmasangkay solution works for me just well, thanks a lot bro!

Tekutorukushi · 2024-09-29T08:52:09Z

page.tsx:
const PDFViewer = dynamic(
  () => import('./pdf-viewer').then(mod => mod.PDFViewer),
  { ssr: false }
)
pdf-viewer.tsx
"use client"

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

export function PDFViewer() {
  return (
    <Document>
      <Page />
    </Document>
  )
This still doesn't work for me when I use Nextjs 14.2.11 :(

When I run npm run build I get a craaazy long error with lots of whitespace and this on the bottom: `----

Caused by: 0: failed to parse input file 1: Syntax Error

Build failed because of webpack errors

I had the same mistake, but do it
pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs;

DanielWilliamClarke · 2024-10-07T08:55:06Z

page.tsx:
const PDFViewer = dynamic(
  () => import('./pdf-viewer').then(mod => mod.PDFViewer),
  { ssr: false }
)
pdf-viewer.tsx
"use client"

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

export function PDFViewer() {
  return (
    <Document>
      <Page />
    </Document>
  )
This still doesn't work for me when I use Nextjs 14.2.11 :(
When I run npm run build I get a craaazy long error with lots of whitespace and this on the bottom: `----
Caused by: 0: failed to parse input file 1: Syntax Error

Build failed because of webpack errors
I had the same mistake, but do it pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs;

This along with this polyfill works for me 🎉

This works for me
put this in the component where you use the Document component

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

Add this on the page.tsx of the route.


if (typeof Promise.withResolvers === "undefined") {
    if (typeof window !== 'undefined') {
      // @ts-expect-error This does not exist outside of polyfill which this is doing
      window.Promise.withResolvers = function () {
        let resolve, reject
        const promise = new Promise((res, rej) => {
          resolve = res
          reject = rej
        })
        return { promise, resolve, reject }
      }
    } else {
      // @ts-expect-error This does not exist outside of polyfill which this is doing
      global.Promise.withResolvers = function () {
        let resolve, reject
        const promise = new Promise((res, rej) => {
          resolve = res
          reject = rej
        })
        return { promise, resolve, reject }
      }
    }
  }

Worked for me as well. Thanks!

vicapow · 2024-10-13T06:12:41Z

TLDR - Next.JS is trying to run client side code, server side but some of that code relies on APIs that don't exist in Node.JS env (Promise.withResolvers)? This is complicated by the fact that the web worker code for pdfjs loaded from a CDN isn't code react-pdf has control over (so I think is really the wrong place for this issue.)

If you want to run the non-legacy pdfjs web worker code from a Next.JS, I found one way to do that with something like this:

// So we can at least still get typescript type info,
// import only the types for react-pdf
import type * as reactPdfType from "react-pdf";
// Workaround for https://github.com/wojtekmaj/react-pdf/issues/1811
let reactPdf: typeof reactPdfType | undefined;
if (typeof window !== "undefined") {
  reactPdf = require("react-pdf");
}

// URL for the worker file (if you're using the CDN)
// We need to use the CDN link to try and work around
// this issue: https://github.com/vercel/next.js/discussions/61549
if (reactPdf?.pdfjs && typeof window !== "undefined") {
  const workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${reactPdf.pdfjs.version}/pdf.worker.min.mjs`;
  reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
}

// ...

// Use <reactPdf.Document {/*...*/} />

// ...

Kasui92 added the bug Something isn't working label Jun 1, 2024

This comment was marked as spam.

Sign in to view

wojtekmaj closed this as completed Jun 10, 2024

wojtekmaj mentioned this issue Jun 19, 2024

TypeError: Promise.withResolvers is not a function #1831

Closed

4 tasks

wojtekmaj mentioned this issue Aug 22, 2024

Build error #1858

Closed

4 tasks

Bengejd mentioned this issue Aug 29, 2024

feat(pdfjs): upgrade to v4 - without breaking backwards compatibility VadimDez/ng2-pdf-viewer#1128

Merged

wojtekmaj mentioned this issue Sep 1, 2024

digest digest: "256245278" #1866

Closed

4 tasks

wojtekmaj added question Further information is requested and removed bug Something isn't working labels Sep 2, 2024

hurali97 mentioned this issue Sep 9, 2024

chore: fix security vulnerabilities Expensify/App#48532

Merged

50 tasks

adnanmirza1 mentioned this issue Oct 31, 2024

TypeError: Promise.withResolvers is not a function elizaOS/eliza#76

Closed

Utkarsh212 mentioned this issue Nov 17, 2024

TypeError: Promise.withResolvers is not a function Utkarsh212/react-pdftotext#11

Open

bohdangarchu mentioned this issue Nov 30, 2024

Feature/f 95 download portal pdf reports jst-seminar-rostlab-tum/wfp-hunger-map#81

Merged

0xPhysis mentioned this issue Dec 7, 2024

Error pnpm start - Promise.withResolvers(): pdfjs-dist elizaOS/eliza#902

Closed

saseungmin mentioned this issue Dec 14, 2024

Next.js 15 & React 19 마이그레이션 DNDACADEMY/dnd-academy-v2#255

Closed

Next.js and v9 on build Promise.withResolvers #1811

Next.js and v9 on build Promise.withResolvers #1811

Comments

Kasui92 commented Jun 1, 2024 • edited Loading

Before you start - checklist

Description

Steps to reproduce

Expected behavior

Actual behavior

Additional information

Environment

lucaslosi commented Jun 4, 2024

craigcartmell commented Jun 5, 2024

This comment was marked as spam.

vpsk commented Jun 6, 2024

craigcartmell commented Jun 6, 2024

wojtekmaj commented Jun 6, 2024

craigcartmell commented Jun 6, 2024

NikkiHess commented Jun 8, 2024

justinfarrelldev commented Jun 10, 2024 • edited Loading

wojtekmaj commented Jun 10, 2024

justinfarrelldev commented Jun 10, 2024

fate7bardiche commented Jun 15, 2024

justinwaite commented Jun 16, 2024

justinfarrelldev commented Jun 16, 2024 • edited Loading

adrianbienias commented Jun 23, 2024 • edited Loading

justinfarrelldev commented Jun 23, 2024

adrianbienias commented Jun 23, 2024 • edited Loading

maxess3 commented Jun 23, 2024 • edited Loading

siinghd commented Jun 23, 2024 • edited Loading

Ori2846 commented Jun 25, 2024 • edited Loading

DonikaV commented Jul 2, 2024 • edited Loading

ldiqual commented Jul 3, 2024 • edited Loading

allicanseenow commented Jul 4, 2024 • edited Loading

gabsoftware commented Jul 5, 2024 • edited Loading

gabsoftware commented Jul 5, 2024

aldwnesx commented Jul 7, 2024

DonikaV commented Jul 19, 2024

jesus-maryapp commented Aug 10, 2024 • edited Loading

ssxdev commented Aug 12, 2024 • edited Loading

oaitbaziz commented Aug 13, 2024

Dmytro-Uchkin-Ytree commented Aug 14, 2024 • edited Loading

Dmytro-Uchkin-Ytree commented Aug 14, 2024

dsternlicht commented Aug 15, 2024

Bfaschat commented Aug 19, 2024 • edited Loading

TypeScript:

Javascript

Kasui92 commented Aug 19, 2024

Bfaschat commented Aug 19, 2024

Bfaschat commented Aug 20, 2024 • edited Loading

TypeScript:

Javascript

robiulhr commented Aug 24, 2024

zeeklog commented Sep 2, 2024

Alwaz commented Sep 7, 2024

luuknnh commented Sep 17, 2024

rlawnsrud0509 commented Sep 20, 2024

Bumboobee commented Sep 27, 2024

Tekutorukushi commented Sep 29, 2024

DanielWilliamClarke commented Oct 7, 2024

This along with this polyfill works for me 🎉

vicapow commented Oct 13, 2024 • edited Loading

Kasui92 commented Jun 1, 2024 •

edited

Loading

justinfarrelldev commented Jun 10, 2024 •

edited

Loading

justinfarrelldev commented Jun 16, 2024 •

edited

Loading

adrianbienias commented Jun 23, 2024 •

edited

Loading

adrianbienias commented Jun 23, 2024 •

edited

Loading

maxess3 commented Jun 23, 2024 •

edited

Loading

siinghd commented Jun 23, 2024 •

edited

Loading

Ori2846 commented Jun 25, 2024 •

edited

Loading

DonikaV commented Jul 2, 2024 •

edited

Loading

ldiqual commented Jul 3, 2024 •

edited

Loading

allicanseenow commented Jul 4, 2024 •

edited

Loading

gabsoftware commented Jul 5, 2024 •

edited

Loading

jesus-maryapp commented Aug 10, 2024 •

edited

Loading

ssxdev commented Aug 12, 2024 •

edited

Loading

Dmytro-Uchkin-Ytree commented Aug 14, 2024 •

edited

Loading

Bfaschat commented Aug 19, 2024 •

edited

Loading

Bfaschat commented Aug 20, 2024 •

edited

Loading

vicapow commented Oct 13, 2024 •

edited

Loading