React-pdf: Unhandled Rejection (Error): stream.push() after EOF when using PDFDownloadLink

[veronesecoms]

Describe the bug
I have this Users component that uses the component UsersPDF to print a table:

import React, { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
import UsersPDF from './UsersPDF'

import {    
    PDFDownloadLink 
} from "@react-pdf/renderer";   

const Users = () => {

    useEffect(() => {
        dispatch(userActions.filterUsers({
            loginFilter: loginFilter,
            activeFilter: activeFilter,
            companyLoggedFilter: companyLoggedFilter,
            page: page
        }))
    }, [page])// eslint-disable-line

    useEffect(() => {
        // returned function will be called on component unmount 
        return () => {
            dispatch(userActions.clearUsers())
        }
    }, [])// eslint-disable-line

    return (
        <div>
            <PDFDownloadLink    
                document={<UsersPDF />} 
                fileName="movielist.pdf"    
                style={{    
                    textDecoration: "none", 
                    padding: "10px",    
                    color: "#4a4a4a",   
                    backgroundColor: "#f2f2f2", 
                    border: "1px solid #4a4a4a" 
                }}  
                >   
                {({ blob, url, loading, error }) => 
                    loading ? "Loading document..." : "Download Pdf"    
                }   
            </PDFDownloadLink>
        </div>
    )
}


export default Users

This is my usersPDF component:

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

const UsersPDF = () => {    

    const styles = StyleSheet.create({
        table: { 
            display: "table", 
            width: "auto", 
            borderStyle: "solid", 
            borderWidth: 1, 
            borderRightWidth: 0, 
            borderBottomWidth: 0 
        }, 
        tableRow: { 
            margin: "auto", 
            flexDirection: "row" 
        }, 
        tableCol: { 
            width: "25%", 
            borderStyle: "solid", 
            borderWidth: 1, 
            borderLeftWidth: 0, 
            borderTopWidth: 0 
        }, 
        tableCell: { 
            margin: "auto", 
            marginTop: 5, 
            fontSize: 10 
        }
    });

return (    
    <Document>
        <Page style={styles.body}>
            <View style={styles.table}> 
                <View style={styles.tableRow}> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>Product</Text> 
                </View> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>Type</Text> 
                </View> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>Period</Text> 
                </View> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>Price</Text> 
                </View> 
                </View>
                <View style={styles.tableRow}> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>React-PDF</Text> 
                </View> 
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>3 User </Text> 
                </View> 
                <View style={styles.tableCol}>
                    <Text style={styles.tableCell}>2019-02-20 - 2020-02-19</Text> 
                </View>
                <View style={styles.tableCol}> 
                    <Text style={styles.tableCell}>5€</Text> 
                </View> 
                </View> 
            </View>
        </Page>
    </Document> 

)   

}   

export default UsersPDF 

To Reproduce
After my page renders, i have this error message:

Unhandled Rejection (Error): stream.push() after EOF
▶ 6 stack frames were collapsed.
Document._callee7$
C:/Users/renat/Desktop/DEV/src/elements/Document.js:192
189 | this.applyProps();
190 | await this.loadAssets();
191 | await this.renderPages();

192 | this.root.instance.end();
| ^ 193 | Font.reset();
194 | } catch (e) {
195 | throw e;
View compiled
▶ 5 stack frames were collapsed.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• React-pdf version [e.g. v1.1.0]

my package.json:

"dependencies": {
    "@material-ui/core": "4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "@react-pdf/renderer": "^1.6.8",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "notistack": "^0.9.8",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-history": "^0.18.2",
    "react-html2pdf": "^1.0.1",
    "react-input-mask": "^2.0.4",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "styled-components": "^5.0.1",
    "yup": "^0.28.1"
  },

[geerthoekzema]

Is it possible that you rerender the PDF (due to mounting / unmounting of the component) while the PDF document is still rendering. See #420

[AnkurBaliyan]

I was facing this problem. But finally I got the solution. So first of all make a state as following and then use it as conditionally at component return.

const [isReady, setIsReady] = useState(false);

useEffect(()=> {
setIsReady(true);
},[]);

return (
<>
{ isReady ? (

---

rest line of code here.

) :
('')
}

)