search

wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.
https://projects.wojtekmaj.pl/react-pdf
MIT License
9.48k stars 886 forks source link

sendWithPromise("GetPage", ... null causing an error #974

Open jdc-cunningham opened 2 years ago

jdc-cunningham commented 2 years ago

Before you start - checklist

Description

I use two instances of react-pdf. The main viewer is using a functional component and the second one is a class-based that's not visible. It's a background renderer to produce pdf thumbnail previews. This has been working fine since 2021.

After recently pulling down 5.7.2 my background PDF render throws an error just before it renders. After reverting to 5.7.1 it's working fine.

I put error handlers on the <Document... and <Page... I have onSourceError, onLoadError, onRendeError handlers but those don't fire, the error above happens.

I will continue investigating/work on reproducible code unfortunately what I'm working on is not public.

Attached below are the images of the error.

Steps to reproduce

Setup a class-based react-pdf component.

Pass down a file path (by props), it renders.

Pass down another file path

Expected behavior

The PDFs render as the sources are updated.

Actual behavior

Fails to render the PDF/produces the errors below

When this error happens it crashes the entire react app eg. blank screen.

err-1

err-2

Additional information

No response

Environment

wojtekmaj commented 2 years ago

Looks like it's this bit...

https://github.com/mozilla/pdf.js/blob/a3e34002cbc8870e6a863bd3ded045c842b6de07/src/display/api.js#L2874-L2877

Interesting.

Could it be the changes from #947?

jdc-cunningham commented 2 years ago

Thanks for the quick response.

I loaded it up on a staging site/back to 5.7.2. This shows a gap in our testing to test this far (more than one document loaded in the background).

I did look to see if there's a direct call relevant there. I added an expanded callstack trace attached below, I think your hunch is right.

It could be that I'm using it wrong too. Here's a gist on the background renderer class-based component I have. This is a child of another component managing its state so the active file comes down as a prop. Also the functional instance is a sibling/same depth as this functional one.

Maybe it's the async getDocPageImg call?

expanded-stack

sueyz commented 2 years ago

Am facing the same issue, hoping for this to get fixed soon. Thanks!

jdc-cunningham commented 2 years ago

Not a solution but I've capped the react-pdf version in my project to 5.7.1 for the time being.

PerryAJ commented 2 years ago

We've hit the same situation with an application using react 16.14. The first PDF seemed to load fine, but remounting or changing to a new PDF would result in errors.

Was able to workaround by rolling back to 5.7.1 as others have. Don't have much else to add to previous reports, but did want to note that the root cause was one of a number of different errors on different subcomponents from Page down. For future search-ability, figured it was worth adding examples from a dev bundle created with 5.7.2:

Failed prop type: The prop 'page.commonObjs._objs' is marked as required in 'PageCanvasInternal', but its value is 'undefined'. 

Failed prop type: The prop 'page.commonObjs._objs' is marked as required in 'TextLayerInternal', but its value is 'undefined'
github-actions[bot] commented 2 years ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

FabricioK commented 2 years ago

I`m having the same problem. Is this being addressed?

wojtekmaj commented 1 year ago

Does anyone have a reproducible CodeSandbox repo? I'm especially interested if this is still reproducible in v6.

illusdolphin commented 1 year ago

We have this issue for the following flow: 1) Render without file (see No PDF file specified.) 2) File is selected => ok 3) Render without file (see No PDF file specified.) 4) File is selected again => JS error Downgrade to 5.7.1 didn't help, was another issue. Made a workaround: just to add Key for Document component that contains file name, then everything seems to work fine because of re-initialization of component. 6.x branch is not usable due to issue #1043 (thanks for keeping API compatible, but webpack 4 seems to be not compatible anymore without some re-configuration)

ldiqual commented 1 year ago

We're having the same issue on v6.2.0. Reverting to v5 fixes it. We haven't been able to reproduce locally but it does happen in production and we're getting many errors. We re-render with different files many times during the component's lifetime.

image image
github-actions[bot] commented 1 year ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

illusdolphin commented 1 year ago

I think we solved the issue. It's mostly in the user-code together with internal logic of component. Demo code is simple and does not handle file change situation. Solving for us was easy - just make page number of pages to render to 0 at the moment file is changed. Sample code below (not sure about 100% compiling, but the idea should be clear. For sure this might be solved on component level, then it needs to ignore pages when loading is in progress.

`import React, { useState } from 'react'; import { Document, Page } from 'react-pdf';

function MyApp() { const [numPages, setNumPages] = useState(0); const [fileName, setFileName] = useState('somefile.pdf'); const [pageNumber, setPageNumber] = useState(1);

function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); // <== here is the issue #1 - we save page number of file, but in case it's changed, we know about new number only after it's loaded, before doc is loaded, this value is wrong }

function setNewFile(){ //file change event setNumPages(0); setFileName('newfile.pdf'); }

return (

{Array.from(new Array(numPages), (_, index) => ( ), )} { /* here we render all pages of file, but if new file is being loaded, we try loading pages that are not available */ }

Page {pageNumber} of {numPages}

); }`

ldiqual commented 1 year ago

I found a related issue in react-pdf-viewer that was due to reusing a destroyed worker:

It seems that we're encountering this bug when changing loading blob A then blob B very quickly. My guess is that when page 1 of blob A gets to load, the worker for blob A is already destroyed because blob B is now loading.

pedroferreira37 commented 1 year ago

Just add useAsync or your own implementation when generating the url, the @ldiqual response is correctly, it changes from a to b very quickly and the worker is not setted.

Also, if you gonna using some reactivity, i recommend using debounce in function that change url also

I was used react-pdf/@reneder and change to jsPDF and the issue continued, and this is what i did 

const render = useAsync(async () => {
    const url = doc.output("blob");
    return url;
  }, []);

Here is a code reference how to fix react-pdf/@renderer if someone is using https://github.com/diegomura/react-pdf-site/tree/master/src/components/Repl

MattL75 commented 1 year ago

Weird. I've only now started getting this error when trying to migrate to v7.

cattale93 commented 1 year ago

Hello, I encountered the exact same problem after updating from v6.2.2 to v7.1.1. I solved it controlling the page rendering. I allow my app to render the page only if the document has been successfully loaded (onDocumentLoadSuccess).

WoldemortRules commented 1 year ago

hey - can you add an example how did you resolved it ?@cattale93

luxiangqiang commented 1 year ago

The error can be temporarily bypassed by using:

useEffect(() => {
    setTimeout(() => {
      setIsRenderPdf(true)
    }, 500)
  }, [])
isRenderPdf ? 
<Document 
  key={pdfUrl} 
  file={pdfUrl} >
</Document>
cattale93 commented 1 year ago

hey - can you add an example how did you resolved it ?@cattale93

Hello @WoldemortRules 

<Document
      className={'PDFDoc'}
      file={fileLocation}
      onLoadSuccess={this.onDocumentLoadSuccess}  // the pdf is rendered only based on a specific state in this function.
      onSourceError={this.onLoadError}
      onLoadError={this.onLoadError}
      renderMode={'canvas'}
      onItemClick={this.goToPage}
      options={{ cMapUrl: 'cmaps/',  cMapPacked: true,}}
>

According to the documentation onLoadSuccess -> Function called when the document is successfully loaded.

MasNotsram commented 1 year ago

Same issue here with v6.0.3. Any news on a fix for this?

We can do conditional rendering, but as this worked in V5, it would be nice if this worked in React 18 versions of react-pdf.

jiangxiaoqiang commented 1 year ago

I am facing the same issue when using 7.3.3.

little-buddy commented 1 year ago

It seems I solved the problem. You only need to prevent Document rerender. The above reason is because rerender causes pdfjs to reload pdf with an error.

huypham1411 commented 1 year ago

I only got this error when I resized the screen using the responsive dev tool, here is my call stack

Call Stack
WorkerTransport.getOptionalContentConfig
node_modules\pdfjs-dist\build\pdf.js (2481:0)
PDFPageProxy.render
node_modules\pdfjs-dist\build\pdf.js (1385:0)
drawPageOnCanvas
node_modules\react-pdf\dist\esm\Page\PageCanvas.js (68:0)
commitHookEffectListMount
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20002:0)
commitHookPassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22055:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22160:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
jhunexjun commented 1 year ago

My issue was solved by @illusdolphin. My exact error is not the as sendWithPromise() but pdf Cannot read properties of null (reading 'sendWithStream') But he gave me an idea. So here's the solution:

function onDocumentLoadSuccess(nextNumPages) {
  setNumPages(nextNumPages ?? 0);
}

So you just test the nextNumPage.

name-undef1ned commented 11 months ago

step 1

<Document key={1} file={playUrl} onLoadSuccess={onDocumentLoadSuccess}

step 2

` const onDocumentLoadSuccess = (...args) => { const info = args[0]; setnumPages(info?.numPages??0) setIsRenderPdf(true)//设置状态

}`

step 3

{isRenderPdf&&new Array(10).fill('').map((cur, index) => ( <Page key={index} pageNumber={index + 1} renderAnnotationLayer={false} renderTextLayer={false} width={window.innerWidth} renderMode='canvas' /> ))}

Puetz commented 11 months ago

For me it worked after simply wrapping my Pdf Component with React.memo.

export default React.memo(PdfViewerComponent)

TJohn2017 commented 11 months ago

For anybody still struggling, I got it to work on our side by using the method from this comment on a closed duplicate of this issue.

I'm using Next.js

cp node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js public/pdf.worker.js

Then, within your app where you'd like to setup the worker:

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"

Honestly, I'm not totally sure why this worked. So, if anybody has a better understanding definitely feel free to reply. I'd be curious. Hope this helps!

huypham1411 commented 10 months ago

For anybody still struggling, I got it to work on our side by using the method from this comment on a closed duplicate of this issue.

I'm using Next.js

cp node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js public/pdf.worker.js

Then, within your app where you'd like to setup the worker:

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"

Honestly, I'm not totally sure why this worked. So, if anybody has a better understanding definitely feel free to reply. I'd be curious. Hope this helps!

Hi, I'm using Nextjs too and I also read the relative post about this issue but I don't understand this part

Copy react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js to public

the react-pdf is inside the node_modules so this make me a bit confuse, hope you can help me, appreciate

TJohn2017 commented 10 months ago

For anybody still struggling, I got it to work on our side by using the method from this comment on a closed duplicate of this issue. I'm using Next.js cp node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js public/pdf.worker.js Then, within your app where you'd like to setup the worker:

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"

Honestly, I'm not totally sure why this worked. So, if anybody has a better understanding definitely feel free to reply. I'd be curious. Hope this helps!

Hi, I'm using Nextjs too and I also read the relative post about this issue but I don't understand this part

Copy react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js to public

the react-pdf is inside the node_modules so this make me a bit confuse, hope you can help me, appreciate

So, this method didn't actually end up resolving my issue. It made it less likely to occur, and we didn't see it for a bit but since making this post I've had the same issue a handful more times now. If anybody is able to find a true solution I'd really appreciate it.

If you'd still like to try that method you should see that react-pdf has a node_modules inside of it, despite it being inside of your project's node_modules. The full filepath should be node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js from the base of your Nextjs project.

Adermi commented 8 months ago

我在添加自定义cMapUrl的时候也报这个错，之后把option给缓存就不会有这个问题了。

  const opt = useMemo(() => {
    return {
      cMapUrl: '/bcmaps/',
      cMapPacked: true,
    };
  }, []);

...

  return (
      <Document  options={opt}>
        {...}
      </Document>

  );
Anhaachan commented 7 months ago

I only got this error when I resized the screen using the responsive dev tool, here is my call stack

Call Stack
WorkerTransport.getOptionalContentConfig
node_modules\pdfjs-dist\build\pdf.js (2481:0)
PDFPageProxy.render
node_modules\pdfjs-dist\build\pdf.js (1385:0)
drawPageOnCanvas
node_modules\react-pdf\dist\esm\Page\PageCanvas.js (68:0)
commitHookEffectListMount
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20002:0)
commitHookPassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22055:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22160:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22271:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22138:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (22157:0)

Did you solved the error?

vaibhavpras commented 5 months ago

for anyone still facing this error, @illusdolphin and @jhunexjun 's answer worked for me for the latest version with a few edits.

from @jhunexjun's answer, i had to make 2 small changes

  1. extract the numPages from the document load event object as ({numPages}) instead

  2. add a state management check for document readiness before rendering the pages: basically <Page> was being rendered even before numPages was set upon document load resulting in the error. i am not sure if this is intended behavior for this component, but a quick fix using state management in the onDocumentLoadSuccess function helped me get past

const [isDocumentReady, setIsDocumentReady] = useState(false);

function onDocumentLoadSuccess({numPages}) {
     setNumPages(numPages);
     setIsDocumentReady(true)
   }
.
.
.
return(
     <Document
           file={file}
           onLoadSuccess={onDocumentLoadSuccess}
           options={{
                cMapUrl: 'cmaps/',
                cMapPacked: true,
           }} >

             {isDocumentReady && Array.from(new Array(numPages), (el, index) => (
                  <Page key={`page_${index + 1}`} pageNumber={index + 1} />
              ))}

     </Document>
);
c-oreills commented 1 month ago

Thanks for all the help! Here's a similar solution that uses useEffect with the file prop as a dependency and a guard clause on numPages rather than adding extra state:

function RenderDocument({ file }) {
  const [numPages, setNumPages] = React.useState();

  React.useEffect(() => {
    setNumPages(undefined);
  }, [file]);

  function onDocumentLoadSuccess({ numPages: _numPages }) {
    setNumPages(_numPages);
  }

  return (
    <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
      {numPages != null &&
        [...new Array(numPages).keys()].map((pageIndex) => (
          <Page key={pageIndex} pageIndex={pageIndex} />
        ))}
    </Document>
  );
}
adem-labsi commented 2 weeks ago

Hey everyone,

If anyone is experiencing this issue, I found a fix in React with Vite by removing StrictMode from main.tsx. It appears that the problem arises when the component renders twice. I'm using the example provided by the developers.

johnnyshankman commented 2 days ago

for anyone still facing this error, @illusdolphin and @jhunexjun 's answer worked for me for the latest version with a few edits.

from @jhunexjun's answer, i had to make 2 small changes

  1. extract the numPages from the document load event object as ({numPages}) instead
  2. add a state management check for document readiness before rendering the pages: basically <Page> was being rendered even before numPages was set upon document load resulting in the error. i am not sure if this is intended behavior for this component, but a quick fix using state management in the onDocumentLoadSuccess function helped me get past
const [isDocumentReady, setIsDocumentReady] = useState(false);

function onDocumentLoadSuccess({numPages}) {
     setNumPages(numPages);
     setIsDocumentReady(true)
   }
.
.
.
return(
     <Document
           file={file}
           onLoadSuccess={onDocumentLoadSuccess}
           options={{
                cMapUrl: 'cmaps/',
                cMapPacked: true,
           }} >

             {isDocumentReady && Array.from(new Array(numPages), (el, index) => (
                  <Page key={`page_${index + 1}`} pageNumber={index + 1} />
              ))}

     </Document>
);

This fixed my issue thank you @vaibhavpras