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

Answer 1

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.