Generating two blank pages

Describe the bug When i try to generate a pdf file on browser, the content of my file are two blank pages, no matter what i try to put inside.

To Reproduce This is the code what i call to generate

<PDFDownloadLink document={<RelFatura dados={this.state.excel} titulo={'Voucher a faturar'} />} fileName="Vouchers.pdf">
    {({ blob, url, loading, error }) => (loading ? <i className="fa fa-file-pdf-o"> Loading document...</i> : <i className="fa fa-file-pdf-o"> Gerar pdf </i>)}
</PDFDownloadLink>

this is my RelFatura

export const RelFatura = (props) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <Text style={styles.text}> hi</Text>
    </Page>
  </Document>
);

and these are my styles

const styles = StyleSheet.create({
  page: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
    paddingRight: 35,
  },
  text: {
    margin: 10,
    fontSize: 12,
    textAlign: 'justify',
    fontFamily: 'Times-Roman'
  }
});

i have two pages that use the pdf generator, in one of them he works perfectly i take the RelFatura and put there where it is working and the output was what i expected ( the page with hi written ) but in the other page he give the blank page bug, i try put the same code on both pages nevertheless it did the same bug (one of them still working and the other give me the bug)

Expected behavior A single page with hi written

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu, Windows
• Browser: chorme
• React-pdf version: 1.4.0

[lucas-wilmart]

I was facing the same issue with the PDFDownloadLink Component. Thanks to the suggestions above, I was able to figure a solution out and resolved it by memoizing it with React’s hook useMemo

const stuff = useMemo(
  () => (
    <PDFDownloadLink document={<AccountingPDF />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
  ), [])

I think the documentation should mention this behavior more clearly as it’s confusing.

[birch-jayton]

This was happening to me due to my component triggering a re-render from a state change before my document viewer was finished mounting. This happened because the state change happened on mount.

function MyPdfAppComponent(){
   const [dataForPdf, setDataForPdf] = React.useState()
   React.useEffect(()=>{
      goFetchTheData().then(res=> setDataForPdf(res))
   },[])
   return(
      <PDFViewer>
         <MyDocument data={dataForPdf}/>
      </PDFViewer>
   )
}

this can be fixed by making sure your PDF viewer has everything it needs before its initial render:

function MyPdfAppComponent(){
   const [dataForPdf, setDataForPdf] = React.useState()
   React.useEffect(()=>{
      goFetchTheData().then(res=> setDataForPdf(res))
   },[])
   return{
      dataForPdf && (
      <PDFViewer>
         <MyDocument data={dataForPdf}/>
      </PDFViewer>
      )
   }
}