Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[luokelong]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

"@react-pdf/renderer": "^4.0.0", "next": "14.2.13",

"use client";

import { PDFViewer, Document, Page, View, Text } from "@react-pdf/renderer";

const Pdf = () => {
  return (
    <PDFViewer width="100%" height="100%">
      <Document>
        <Page size="A4">
          <View>
            <Text>Hello World!</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
};

export default Pdf;

[Tossko]

Same here.

[antonigiske]

I have the same issue using the PDFDownloadLink component.

[luokelong]

Has any official paid attention to this issue?

[lorena-caia]

Same here with "@react-pdf/renderer": "3.4.4", "next": "14.2.12",

[typesafeui]

If anyone is having this issue, there are two temporary fixes:

• Downgrade to [email protected] and to make it work for now
• Put "use client" in the top of the page.tsx file if possible ( not possible if you have any server logic in the page.tsx file )

These are just patches to make it work for now though

[bryanjtc]

The issue is related to a regression in a next.js version or a bug in this package?

[jiri-jirsa]

Same here. Downgrade to [email protected] helped, thanks @typesafeui . Hopefully someone fixes it

[romanslonov]

I also found that importing this way works in "next": "14.2.16":

'use client'

import {Document, Page, View, Text} from "@react-pdf/renderer/lib/react-pdf.browser";

[diegomura]

If you are using next js you need use client. Server side PDF generation is not supported

[brianonchain]

I also found that importing this way works in "next": "14.2.16":

'use client'

import {Document, Page, View, Text} from "@react-pdf/renderer/lib/react-pdf.browser";

Thanks, this worked for me, and it was easier than downgrading to [email protected], as that version was not compatible with the lastest version of next-intl

[cor3ntino]

If anyone is having this issue, there are two temporary fixes:

* Downgrade to `[email protected]` and to make it work for now

* Put "use client" in the top of the page.tsx file if possible ( not possible if you have any server logic in the page.tsx file )

These are just patches to make it work for now though

Hello,

Thanks, it works locally but do you manage to make it run in production in a docker ? It does not build for me.

Have a good day

[MrRedu]

Same here

"@react-pdf/renderer": "^4.1.5",
"next": "14.2.15",

[cor3ntino]

Same here

"@react-pdf/renderer": "^4.1.5",
"next": "14.2.15",

I managed to make it work both locally and on docker; you need:

"@react-pdf/renderer": "^4.1.5"
"next": "14.2.8", 

next version is very important, other versions of next had an issue on my end

Also, i needed to remove both the JavaScript polyfills and the PDF.js worker; so REMOVE stuff like that from the file where you implemented your renderer component:

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

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

Also, i am on node:23.3.0-alpine on docker but i feel like other versions work too.

[kyle-robinson-morpheus]

If you are using next js you need use client. Server side PDF generation is not supported

Could you elaborate on this? I thought you could generate PDF documents both on the client and server?

I currently have a NextJS API route that is generating a PDF document and using renderToBuffer and returning it to be downloaded on the client.

I've also got a preview document feature on the UI that uses shared report components used in the document generated via the API route and that is where I'm encountering this error.

[TeraBiusT2]

I also found that importing this way works in "next": "14.2.16":

'use client'

import {Document, Page, View, Text} from "@react-pdf/renderer/lib/react-pdf.browser";

+1 This worked for me too.

[nyxz]

Had that on:

"next": "^14.2.23",
"@react-pdf/renderer": "^4.1.6",

As others mentioned this worked for the client-side rendering

'use client'

import { Document, Page, View, Text, Font } from "@react-pdf/renderer/lib/react-pdf.browser";

But I could still manage to server-side render PDFs with

import { Font, renderToBuffer } from '@react-pdf/renderer'

const pdfBuffer = await renderToBuffer(<InvoicePDFTemplate invoices={invoices} />)
...
// do something with the buffer

where my InvoicePDFTemplate is using

import { Document, Font, Image, Page, StyleSheet, Text, View } from "@react-pdf/renderer/lib/react-pdf.browser"

so I was able to reuse the component both on client and server.

[matthewhoth]

Neither of

* Downgrade to `[email protected]` and to make it work for now

* Put "use client" in the top of the page.tsx file if possible ( not possible if you have any server logic in the page.tsx file )

worked for us.

We have a server generated page, that is updated in the frontend as needed.

Dynamically importing the modals that used the library did the trick.

[Sicria]

I was on "next": "14.2.13" and had to bump to "next": "14.2.23" to resolve the issue along with using @react-pdf/renderer/lib/react-pdf.browser for any imports. Seemed like a safer option rather than downgrading.

[bustilloroy]

I was on "next": "14.2.13" and had to bump to "next": "14.2.23" to resolve the issue along with using @react-pdf/renderer/lib/react-pdf.browser for any imports. Seemed like a safer option rather than downgrading.

Thanks to this., I resolved the issue by adding "/lib/react-pdf.browser" to my import

[leonardo-weber]

The error is still happening, i had to move the pdf generation to the server side with renderToBuffer so that i could solve this. The react-pdf.browser import didn't work for me and i didn't want to risk downgrading the next version just for that, seemed too risky.

"@react-pdf/renderer": "^4.3.1", "next": "14.2.32",

[ryanmlow]

I encountered this issue while running jest unit tests instead. Mocking Document and Page was able to solve it for me:

jest.mock(‘react-pdf’, () => ({
  pdfjs: {
    GlobalWorkerOptions: {
      workerSrc: ''
    }
  },
  Document: jest.fn(),
  Page: jest.fn()
}))

I am on react-pdf v9.