diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.96k stars 1.19k forks source link

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

Closed luokelong closed 3 days ago

luokelong commented 1 month ago

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 commented 1 month ago

Same here.

antonigiske commented 1 month ago

I have the same issue using the PDFDownloadLink component.

luokelong commented 1 month ago

Has any official paid attention to this issue?

lorena-caia commented 1 month ago

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

typesafeui commented 1 month ago

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

These are just patches to make it work for now though

bryanjtc commented 1 month ago

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

jiri-jirsa commented 1 month ago

Same here. Downgrade to next@14.2.8 helped, thanks @typesafeui . Hopefully someone fixes it

romanslonov commented 3 weeks ago

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 commented 3 days ago

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

brianonchain commented 2 days ago

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 next@14.2.8, as that version was not compatible with the lastest version of next-intl