react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

NodeJS renderToBuffer not working with Next 15

Open rohit8 opened this issue 10 months ago • 2 comments

Describe the bug Using Node APIs, like renderToBuffer is not working in NextJS App Router route.

For example, given the method generatePdf:

export const generatePdf = async () => {
  const buffer = await renderToBuffer(<Document />);
  return buffer
};

When called inside a route, such as app/generate-pdf/route.tsx, I see the following error:

 unhandledRejection:  TypeError: PDFDocument is not a constructor

How can I get around this?

I'm using next 15.1.6 and @react-pdf/renderer 4.1.6

rohit8 avatar Feb 12 '25 21:02 rohit8

EDIT - I simply made sure that my react and react-dom are using the latest version and it's working! 🚀

package.json

    "react": "^19.0.0",
    "react-dom": "^19.0.0",

package-lock.json

    "node_modules/react": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
      "license": "MIT",
      "dependencies": {
        "scheduler": "^0.25.0"
      },
      "peerDependencies": {
        "react": "^19.0.0"
      }
    },

I can confirm that I am running into issues too.

package.json

...
    "@react-pdf/renderer": "4.2.1",
    "react-pdf-html": "2.1.3",
    "next": "15.1.7",
...

Error

PDF Generation Error: Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20props%2C%20_owner%2C%20_store%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at renderToBuffer (src/app/api/pdf/route.tsx:18:42)
  16 |   try {
  17 |     // Create PDF document
> 18 |     const pdfStream = await renderToBuffer(
     |                                          ^
  19 |       <PDF privateInformation={privateInformation} />,
  20 |     );
  21 |
 GET /api/pdf 500 in 112ms

I am receiving an HTTP 500 error.

wenindoubt avatar Feb 13 '25 15:02 wenindoubt

Can confirm, upgrading to react 19 "resolved" the issue

tobyjaguar avatar Mar 28 '25 15:03 tobyjaguar