react-pdf: Cannot read property 'dereference' of undefined

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>
    ),
    [],
  )
}

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.

In my case, I was having the same issue and I tried with shouldComponentUpdate function returning false, that worked for me.

I can confirm this is caused by the rerendering of a BlobProvider and, as @sebastijandumancic and many other said, you need to only render the provider when you have everything prepared, and don’t rerender it.

The solution that worked for me is something like this:

1. do not render BlobProvider before document node is ready
2. do not rerender BlobProvider unless your document changes
3. create a new BlobProvider if you have a new document node

it would look like this:

// use React.memo for 2.
const BlobProviderWrapper = React.memo(({ document }) => {

  if(!document) return null; // to satisfy 1.

  //  key={Math.random()} to satisfy 3.
  return <BlobProvider key={Math.random()} document={document}> 
    ...
  </BlobProvider>
});

and, although key={Math.random()} would be bad for performance, we’re safe since this is handled inside the React.memo AND we have the if null before

I am also getting this behavior, but not with big files. When I try to render a single/two page PDF with just a bunch of tables for a couple of times, my Chrome tab freezes and I get the same message @paintedbicycle pasted right above

Just in case this helps anyone

I was running into this issue because I wanted to have both a preview and styled download link, using PDFDownloadLink and PDFViewer as siblings resulted in them both trying to render the same PDF separately at the same time giving this error, so I tried using BlobProvider to generate the PDF once and pass it to both the link and preview, the problem there was that the PDFViewer only accepts a Document as children, meaning to use it you’ll be generating a new PDF which also caused this error and really exacerbated issue #544. I found a somewhat decent work-around using react-pdfobject (which nicely accepts the data URL from a @react-pdf/renderer blob) in a pattern like this to ensure the document render only gets called once on mount, then passing the same data to both the download link and preview:

import React, { useState, useEffect } from 'react'
import { PDFObject } from 'react-pdfobject'
import { pdf } from '@react-pdf/renderer'

import Document from './Document'

export const PdfView = () => {
  const [pdfData, setPdfData] = useState<{
    loaded: boolean
    url?: string
    blob?: Blob
  }>({ loaded: false })

  useEffect(() => {
    ;(async () => {
      const blob = await pdf(<Document />).toBlob()
      const url = URL.createObjectURL(blob)

      setPdfData({
        loaded: true,
        url,
        blob,
      })
    })()
  }, [])

  return !pdfData.loaded ? (
    <LoadingStatus />
  ) : (
    <div>
      <a href={pdfData.url!} download="filename.pdf" type="application/pdf">
        <Button endIcon={<DownloadIcon />}>Download</Button>
      </a>
      <PDFObject
        url={pdfData.url!}
        fallbackLink={false}
        containerProps={{
          style: { height: 600 },
        }}
      />
    </div>
  )
}

It still locks up on large documents due to the fact PDF generation happens in the main thread as per #544 / #464, but at least now it’s not generating each document twice (once for link and once for preview), doesn’t throw a bunch of errors/give blank PDFs, and can display some loading message while the user waits.

Last version ships a new yoga version. Is this still happening to anyone?

Hey people, try to read through this bug report: https://github.com/diegomura/react-pdf/issues/420. This helped me.

Long story short, if you’re generating PDF just for download, do it conditionally. Hope this helps someone.

I got same error when I added wrap={false} to Page component, but it works when I use this prop for View, Text components. I am using next.js. @diegomura help plz

I have a form where users input data and then click a Download link to have a PDF version of the form. Basically the structure of my code was: <PDFDownloadLink component={<PDFResume name={this.state.name}>}> (I’m simplifying here)

I was quite surprised to learn that the PDFResume component was re-rendered every time a user type one letter in the form. This happened because typing a letter in the form changed this.state.name, of course.

But I would expect the PDF to be rendered only when the user clicks the PDFDownloadLink button. It would be more efficient in terms of CPU time and there would be no multiple renders that seem to be the cause of the current bug.

Until a permanent fix is released for the current bug, or (even better) until PDFDownloadLink is modified to render only when clicked, I implemented that workaround: https://github.com/diegomura/react-pdf/issues/420#issuecomment-517367494. If not using Gatsby, replace document.getElementById('___gatsby') by document.getElementById('root').

I got the same error

            <PDFViewer width="100%" style={{ height: '90vh' }}>
              <MyDocument
                { ...this.state.propsToPdf }/>
            </PDFViewer>

Cause I updated propsToPdf on the fly Now I’m setting loading and render only after props propagate and it works!!!

          {
            !this.state.loading &&
            <PDFViewer width="100%" style={{ height: '90vh' }}>
              <MyDocument
                { ...this.state.propsToPdf }/>
            </PDFViewer>
          }