search

diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.34k stars 1.13k forks source link

Cannot read property 'dereference' of undefined #608

Closed jrichmond4 closed 3 years ago

jrichmond4 commented 5 years ago

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>
)
diegomura commented 5 years ago

Can you provide a bit more of the error thread?

skatea09 commented 5 years ago

Thanks for this library @diegomura. I am running into the same issue seemingly when my pdf gets to a certain size, ~around 50 pages. Here is the error below.

Screen Shot 2019-05-21 at 5 34 16 AM

It does not seem to be an issue with the code because if i run each section separately it works, but when i run the whole pdf together I get the error above. Also I am running the PDF server side with node.

Please let me know if you need any additional info. Thanks for your help!

paintedbicycle commented 5 years ago

I'm seeing this too.

Note, I'm seeing it in Chrome, but not Safari.

I am using a custom typeface as well as the PDFViewer frame, if that helps.

3cc0.08eca5fef36a4663495d.js:1 TypeError: _nbind.externalList[e].dereference is not a function
    at __nbind_free_external (3cc0.08eca5fef36a4663495d.js:26)
    at $i (3cc0.08eca5fef36a4663495d.js:26)
    at Xi (3cc0.08eca5fef36a4663495d.js:26)
    at No (3cc0.08eca5fef36a4663495d.js:26)
    at Mm (3cc0.08eca5fef36a4663495d.js:26)
    at Om (3cc0.08eca5fef36a4663495d.js:26)
    at gx (3cc0.08eca5fef36a4663495d.js:26)
    at n.unsetMeasureFunc (3cc0.08eca5fef36a4663495d.js:26)
    at t.cleanup (3cc0.08eca5fef36a4663495d.js:1)
    at 3cc0.08eca5fef36a4663495d.js:1
(anonymous) @ 3cc0.08eca5fef36a4663495d.js:1
3cc0.08eca5fef36a4663495d.js:26 Uncaught (in promise) TypeError: _nbind.externalList[e].dereference is not a function
    at __nbind_free_external (3cc0.08eca5fef36a4663495d.js:26)
    at $i (3cc0.08eca5fef36a4663495d.js:26)
    at Xi (3cc0.08eca5fef36a4663495d.js:26)
    at No (3cc0.08eca5fef36a4663495d.js:26)
    at Mm (3cc0.08eca5fef36a4663495d.js:26)
    at Om (3cc0.08eca5fef36a4663495d.js:26)
    at gx (3cc0.08eca5fef36a4663495d.js:26)
    at n.unsetMeasureFunc (3cc0.08eca5fef36a4663495d.js:26)
    at t.cleanup (3cc0.08eca5fef36a4663495d.js:1)
    at 3cc0.08eca5fef36a4663495d.js:1
3cc0.08eca5fef36a4663495d.js:42 Uncaught Error: stream.push() after EOF
    at w (3cc0.08eca5fef36a4663495d.js:33)
    at n.Vks2.b.push (3cc0.08eca5fef36a4663495d.js:33)
    at n.value (3cc0.08eca5fef36a4663495d.js:33)
    at n.value (3cc0.08eca5fef36a4663495d.js:33)
    at b.s.emit (3cc0.08eca5fef36a4663495d.js:42)
    at F (3cc0.08eca5fef36a4663495d.js:33)
    at 3cc0.08eca5fef36a4663495d.js:33
    at p.F63i.p.run (commons.10ec448a93aa7301ef7a.js:1030)
    at d (commons.10ec448a93aa7301ef7a.js:1030)
3cc0.08eca5fef36a4663495d.js:42 Uncaught Error: stream.push() after EOF
    at w (3cc0.08eca5fef36a4663495d.js:33)
    at n.Vks2.b.push (3cc0.08eca5fef36a4663495d.js:33)
    at n.value (3cc0.08eca5fef36a4663495d.js:33)
    at n.value (3cc0.08eca5fef36a4663495d.js:33)
    at b.s.emit (3cc0.08eca5fef36a4663495d.js:42)
    at F (3cc0.08eca5fef36a4663495d.js:33)
    at 3cc0.08eca5fef36a4663495d.js:33
    at p.F63i.p.run (commons.10ec448a93aa7301ef7a.js:1030)
    at d (commons.10ec448a93aa7301ef7a.js:1030)
joaomosm commented 5 years ago

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

rmolinamir commented 5 years ago

Same here, unfortunately :(

In my case, it's happening when using @react-pdf/styled-components, and applying the following styles to the View component:

EDIT: Seems to be random, actually. Originally I thought it was because of the styled components, but I can't really tell for sure now.

export const Filled = styled.View`
  **flex-direction: 'row';**
  **align-items: 'stretch';**
  background-color: ${props => props.backgroundColor || props.theme.primaryColor};
  color: ${props => props.color || '#FFF'};
  padding: 5px 10px;
`;

Only the properties surrounded by ** is causing this. The others work perfectly.

Perhaps this might help:

index.js:2178 TypeError: Cannot read property 'dereference' of undefined
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
__stack_frame_overlay_proxy_console__ @ index.js:2178
index.js:2178 TypeError: _nbind.externalList[num].dereference is not a function
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at View.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
__stack_frame_overlay_proxy_console__ @ index.js:2178
index.js:2178 TypeError: Cannot read property 'dereference' of undefined
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
__stack_frame_overlay_proxy_console__ @ index.js:2178
index.js:2178 TypeError: _nbind.externalList[num].dereference is not a function
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
__stack_frame_overlay_proxy_console__ @ index.js:2178
3summary:1 Uncaught (in promise) TypeError: Cannot read property 'dereference' of undefined
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
summary:1 Uncaught (in promise) TypeError: _nbind.externalList[num].dereference is not a function
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at View.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
summary:1 Uncaught (in promise) TypeError: Cannot read property 'dereference' of undefined
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
summary:1 Uncaught (in promise) TypeError: _nbind.externalList[num].dereference is not a function
    at __nbind_free_external (nbind.js:597)
    at wf (nbind.js:3299)
    at vf (nbind.js:3297)
    at hh (nbind.js:3517)
    at bq (nbind.js:5837)
    at $p (nbind.js:5833)
    at OC (nbind.js:9653)
    at Bound.unsetMeasureFunc (nbind.js:1473)
    at Text.cleanup (react-pdf.browser.es.js:309)
    at react-pdf.browser.es.js:307
    at Array.forEach (<anonymous>)
    at Page.cleanup (react-pdf.browser.es.js:306)
    at react-pdf.browser.es.js:5011
    at Array.forEach (<anonymous>)
    at Document.cleanup (react-pdf.browser.es.js:5010)
    at Root.cleanup (react-pdf.browser.es.js:90)
    at Root._callee$ (react-pdf.browser.es.js:114)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
events.js:59 Uncaught Error: stream.push() after EOF
    at readableAddChunk (_stream_readable.js:271)
    at PDFDocument.webpackJsonp../node_modules/readable-stream/lib/_stream_readable.js.Readable.push (_stream_readable.js:245)
    at PDFDocument._write (pdfkit.browser.es.js:3731)
    at PDFReference.finalize (pdfkit.browser.es.js:255)
    at Deflate.webpackJsonp../node_modules/events/events.js.EventEmitter.emit (events.js:96)
    at endReadableNT (_stream_readable.js:1010)
    at afterTickTwo (index.js:27)
    at Item../node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)
events.js:59 Uncaught Error: stream.push() after EOF
    at readableAddChunk (_stream_readable.js:271)
    at PDFDocument.webpackJsonp../node_modules/readable-stream/lib/_stream_readable.js.Readable.push (_stream_readable.js:245)
    at PDFDocument._write (pdfkit.browser.es.js:3731)
    at PDFReference.finalize (pdfkit.browser.es.js:255)
    at Deflate.webpackJsonp../node_modules/events/events.js.EventEmitter.emit (events.js:96)
    at endReadableNT (_stream_readable.js:1010)
    at afterTickTwo (index.js:27)
    at Item../node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)
    at cleanUpNextTick (browser.js:106)
3sentry.io/api/1341698/store/?sentry_key=e0e474a0fab14f919147bc25cd32429a&sentry_version=7:1 Failed to load resource: the server responded with a status of 403 (FORBIDDEN)
10events.js:59 Uncaught Error: stream.push() after EOF
    at readableAddChunk (_stream_readable.js:271)
    at PDFDocument.webpackJsonp../node_modules/readable-stream/lib/_stream_readable.js.Readable.push (_stream_readable.js:245)
    at PDFDocument._write (pdfkit.browser.es.js:3731)
    at PDFReference.finalize (pdfkit.browser.es.js:255)
    at Deflate.webpackJsonp../node_modules/events/events.js.EventEmitter.emit (events.js:96)
    at endReadableNT (_stream_readable.js:1010)
    at afterTickTwo (index.js:27)
    at Item../node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)
    at cleanUpNextTick (browser.js:106)
sgrobert commented 5 years ago

Hi there,

I've also faced this issue. Crashed my Chrome as well.

I presume it affects when there is a backend setState() going on and it initiates another "render()" that cause it to happen, though I am unsure what the error of "TypeError: Cannot read property 'dereference' of undefined" is all about.

Tentatively, my only work around is to take out the entire render code that used to generate, as from my testing, the re-render of "blob", caused the entire thing to crash.

Hopefully, somehow this is get resolved, as I did spent a lot of time just to pre-code the live-render of a one-page PDF.

colleenpurcell commented 5 years ago

@diegomura Getting the same "Cannot read property 'dereference' of undefined" error when i update the state of a component that includes the react-pdf form--which gets rerendered with the new state. Is this being worked on? The ticket has been open/unresolved for a while now...

fluke commented 5 years ago

I believe this might be related to #420.

fellipegpbotelho commented 4 years ago

@diegomura i'm getting the same error when i use Image component from @react-pdf/renderer

andrioid commented 4 years ago

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.

relightme commented 4 years ago

I had the same error when I passed a data not with props, but with the mst store and after saving the pdf this error appeared at the moment when I reset the store. _nbind.externalList[e].dereference is not a function

ChuyAR17 commented 4 years ago

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

ivan133 commented 4 years ago

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>
          }
luc-plamondon commented 4 years ago

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').

indrakumarjatav commented 4 years ago

Hello, I got the sem error in PDF Please help me

Screenshot from 2019-12-11 12-49-46

SashaShostyr commented 4 years ago

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

KirtiNirkhiwale commented 4 years ago

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

Thanks. It worked for my

sebastijandumancic commented 4 years ago

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.

bogdibota commented 4 years ago

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

markpradhan commented 3 years ago

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>
    ),
    [],
  )
}
wyqydsyq commented 3 years ago

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.

Nases commented 3 years ago

I just put my content inside <View>{...}</View> and used wrap={false} on <Page> component. I use Next.js.

<Document title='My Title'>
  <Page wrap={false} size='A4'>
    <View>
      <Text>no error on refresh</Text>
    </View>
  </Page>
</Document>
Noubissie commented 3 years ago

This occured due to the fact that u are trying to change the state of the variable at thesame time the pdf is being render hence causing an undefined transit state. To control this make sure you change state is complete before rendring the pdf. It's independent weather you are using downloadLink and PdfView at thesame time just control you state transitions

{
          classReportState.length == 5 ? <PDFViewer style={{width:"100%", height:"100vh"}}>
                <ReportCardTemplate data2={classReportState}/>
            </PDFViewer> : <PDFViewer style={{width:"100%", height:"100vh"}}>
                <ReportCardTemplate />
            </PDFViewer>
}
Noubissie commented 3 years ago

@Nases in nextjs your can't use direct client side rendering. If you wish doing that you should use dynamic import import dynamic from "next/dynamic" const reactPdfRenderer = dynamic(()=>import('@react-pdf/renderer')) dynamic import or visite run react-pdf/renderer server-side/ running and saving on a node

monopixmonopix commented 3 years ago

set key={...} prop for "force" rerender. ex: <PDFViewer key={data.something}>..document..</PDFViewer>

mclngl commented 3 years ago

getting the same error whenever I add wrap={true} to the Page component on big pdfs (around 50 pages) I'm using it server side with node

DewangS commented 3 years ago

ok, guys here are my 2 cents worth after going through agonising pain to get around this issue. I used @ivan133 solution and it worked so, below is how I render (not downloading PDF in my case). I use formik form for user to select relevant date using the material-ui date picker. Based on the date selection, I have to fetch data using an API and render it.

PLEASE TAKE A NOTE About React's key value requirement for each HTML element. This is a HUGE gotcha which I ran in to. So, basically I saw standard React errors in console log where React was complaining about each UI element (in this case PDF elements like Text etc) were not having UNIQUE key supplied. So, I added unique key values e.g. key='01', key='02' etc etc to satisfy React requirements and not to have those red flags. This caused all sorts of issues including the ones mentioned above by some of you. PLEASE PLEASE Don't add key to any of these react-PDF elements.

variable declaration section ...starting with default to TRUE as loading. mailingAddresses is another hook which stores data fetched from the API call.

const [loading, setLoading]=useState(true)
const [mailingAddresses, setMailingAddresses] = React.useState([]);

Below is my HTML element ....which makes a call to the createPDFDocument() method ..

<Grid
      container
      direction="row"
      alignItems="center"
      style={{
        flexGrow: 1,
      }}
    >
          {createPDFDocument()} 
    </Grid>

The createPDFDocument() method is as per below which uses Ivan033's solution of loading flag. The createPage() method uses mailingAddresses (as declared above in the declaration section) an array with JSON objects to generate PDF with multiple pages.

const createPDFDocument =  () => {
    return(
      !loading && 
      <PDFViewer style={{ width: "100vw", height: "100vh" }}>
      <Document title={moment(selectedDate).format("DDMMYYYY")+`_Letters`}>
                  <Page
                    style={styles.page}
                    size={{ width: 595.28, height: 841.89 }}
                  >
                    { createPage()}
                  </Page>
                </Document>
                </PDFViewer>
    )
  }

in the below method where I am fetching data using an API, I set the loading flag..before the API call and soon after I set the mailingAddresses hook value see below ... esp.setMailingAddresses() and setLaoding() calls

async function getMailingAddresses(selectedDate) {
    let addressesArr = [];
    setLoading(true)
    console.log("+++ Permit Issue Date : ", selectedDate);

    API.get(
      `http://xyz:9000/api/MailingAddresses/${selectedDate}`
    )
      .then(async (response) => {
        response.data.forEach((addressRep) => {
          addressesArr.push({
            name: addressRep.name,
            address1: addressRep.address1,
            address2: addressRep.address2,
            city: addressRep.suburb,
            postcode: addressRep.postcode,
          });

        });

        setMailingAddresses(addressesArr);
        setLoading(false)
      })
      .catch((error) => {
        console.log("*** ERROR RESPONSE getting addresses : ", error);
      });
  };

I sincerely like to thank @ivan133 and hope this will help others as it's just a sheer pain and frustrating to deal with this. I spent so many hours trying to fix this.

DewangS commented 3 years ago

set key={...} prop for "force" rerender. ex: <PDFViewer key={data.something}>..document..</PDFViewer>

@monopixmonopix I actually found other way round i.e. setting the key was the root cause of this problem for me. The moment, I removed key values for each react-PDF elements, the whole thing worked.

DewangS commented 3 years ago

This occured due to the fact that u are trying to change the state of the variable at thesame time the pdf is being render hence causing an undefined transit state. To control this make sure you change state is complete before rendring the pdf. It's independent weather you are using downloadLink and PdfView at thesame time just control you state transitions

{
          classReportState.length == 5 ? <PDFViewer style={{width:"100%", height:"100vh"}}>
                <ReportCardTemplate data2={classReportState}/>
            </PDFViewer> : <PDFViewer style={{width:"100%", height:"100vh"}}>
                <ReportCardTemplate />
            </PDFViewer>
}

@Noubissie understood though how do you manage it when you have dynamic content? for example in my case I had to fetch data upon user's date selection and present it in PDF. I have no other option than using the state variables e.g. Hooks. When the state variable (an array of JSON objects) gets updated with a new set of values from the API call, In my case it triggers the page creation function to create an array of various react-PDF elements and once this array of React PDF element finsihes, my function createPage() (see above) post, returns it back to the element and I was still getting this mismatch data type error.

diegomura commented 3 years ago

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

diegomura commented 3 years ago

Does it? Haha sorry. I still cannot replicate it on my end and would like to know if I can close this ticket

no-response[bot] commented 3 years ago

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

MirzadVa commented 2 years ago

I had the same issue today and inside my <Text></Text> component I've had some style. After I commented heightfrom style, it worked