react-pdf: sendWithPromise("GetPage", ... null causing an error

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 ( <div onClick={setNewFile}> <Document file={fileName} onLoadSuccess={onDocumentLoadSuccess}> {Array.from(new Array(numPages), (_, index) => ( <Page key={index} pageNumber={index + 1} /> ), )} { /* here we render all pages of file, but if new file is being loaded, we try loading pages that are not available */ } </Document>

Page {pageNumber} of {numPages}

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'

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)

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

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

...

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

  );

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.

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

I am facing the same issue when using 7.3.3.

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.

The error can be temporarily bypassed by using:

useEffect(() => {
    setTimeout(() => {
      setIsRenderPdf(true)
    }, 500)
  }, [])

isRenderPdf ? 
<Document 
  key={pdfUrl} 
  file={pdfUrl} >
</Document>

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

• Issue: https://github.com/react-pdf-viewer/react-pdf-viewer/issues/417
• Fix: https://github.com/react-pdf-viewer/react-pdf-viewer/pull/424

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.