Cannot read property 'dereference' of undefined

I’m just trying a simple example to download a PDF with a PDFDownloadLink and its throwing the above error when the component renders.

const ReportPDF = () => (
        <Document>
            <Page size="A4">
                <View>
                    <Text>Section #1</Text>
                </View>
                <View>
                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );
...
render  (
<div>
                                    <PDFDownloadLink document={<ReportPDF/>} fileName="somename.pdf">
                                        {({loading}) => loading ? <Button>Loading</Button> : <Button>PDF</Button>}
                                    </PDFDownloadLink>
                                </div>
)

[markpradhan]

Apparently you should render it only once, so just use “useMemo”:

const DownloadPdf = () => {
  return useMemo(
    () => (
      <PDFDownloadLink document={<MyDocument />} fileName="some-nane.pdf">
        {({ loading }) => (loading ? 'loading...' : 'download')}
      </PDFDownloadLink>
    ),
    [],
  )
}

[andrioid]

I’ve been playing with react-pdf or around two weeks now and I mostly get these type of errors if rendering is interrupted.

Try preloading everything before trying to render with react-pdf. It seems that re-renders are a common cause for problems.

That includes fonts, images (urls are fine though), async data. Fetch it all in your container and THEN render the PDF for the best results.