Error "render is a Node specific API" when using the module @react-pdf/renderer

Question

Using the module @react-pdf/renderer with official example (https://snyk.io/advisor/npm-package/@react-pdf/renderer):

    import ReactPDF, { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

    // Create styles
    const styles = StyleSheet.create({
        page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
        },
        section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
        }
    });
    
    // Create Document Component
    const MyDocument = (): JSX.Element => (
        <Document>
            <Page size="A4" style={styles.page}>
                <View style={styles.section}>
                    <Text>Section #1</Text>
                </View>
                <View style={styles.section}>
                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );

    ReactPDF.render(<MyDocument />, `example.pdf`);

But I get an error:

Error: render is a Node specific API. You're either using this method in a browser, or your bundler is not loading react-pdf from the appropriate web build.

Please tell me why this error occurred and how I can fix it

I had the same problem here!

LucasBr
– LucasBr

2021-05-18 19:26:09 +00:00
Commented May 18, 2021 at 19:26 — LucasBr
– LucasBr, Commented May 18, 2021 at 19:26

Israel Nkum · Accepted Answer · 2021-06-09 23:03:03Z

9

The render function only works on the server and react works on the client side, if you want to render in the browser then check the ReactDOM.render function makes use of PDFViewer component.

answered Jun 9, 2021 at 23:03

Israel Nkum

1341 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hamdi islam · Accepted Answer · 2023-05-15 14:55:27Z

4

if you're using Next.js, dynamically import your PDF template with ssr option set to false

    const Template = dynamic(() => import("@/componants/Templates/PDF/Formation"), {
          loading: () => <p>Loading...</p>,
          ssr: false,
          });

answered May 15, 2023 at 14:55

hamdi islam

1,56316 silver badges27 bronze badges

Collectives™ on Stack Overflow

Error "render is a Node specific API" when using the module @react-pdf/renderer

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related