Adding cMapUrl re-render Page and give TypeError: Cannot read properties of null (reading 'sendWithStream')

[reinalee123]

Hi,
I am working on pdf viewer web app with "react-pdf": 7.3.3

It displays pdf file with no problem without cMapUrl,
but as soon as I add cMapUrl, it gives an error TypeError: Cannot read properties of null (reading 'sendWithStream') and Warning: Error: Transport destroyed
I tried both cdn, and vite method and the result was the same.

here is my code:

export const PDFViewer: React.FC<PDFPreviewerProps> = () => {
  const [totalNumPages, setTotalNumPages] = useState<number>(0);
  const [pageWidth, setPageWidth] = useState<number>(0);

  pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

 const onDocumentLoadSuccess = async (pdf) => {
    if (pdf.numPages) {
      setTotalNumPages(pdf.numPages);
      setPageWidth(500);
    }
  };

return(
  <Document
      file={srcUrl}
      options={{
        cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
      }}
      onLoadSuccess={(pdf) => {
        onDocumentLoadSuccess(pdf);
      }}
    >
      {totalNumPages>0 && Array.from({ length: totalNumPages }, (_, index) => (
        <Page
          key={`page_${index + 1}`}
          pageNumber={index + 1}
          scale={pageScale / 100}
          customTextRenderer={textRenderer}
        />
      ))}
    </Document>)
 

Here's my thought.
I think the problem occurs when page is re-rendered.
On the first render totalNumPages is 0, so page is not rendered until document is on load.
However, at the time it's rerendered, totalNumPages is greater than 0, so it tries to render the page, while document is not loaded.

Removing setPageWidth from onDocumentLoadSuccess removes error,
but whenever I change state value gives the same error .
For example, I have text search feature and everytime I type the word, I can see that page is re-rendered.
If I type the word fast, it crashes and give the same error TypeError: Cannot read properties of null (reading 'sendWithStream').

Before I added cMapUrl, this did not happen (and I don't think page was re-rendered).
Is cMapUrl make page re-render?? Is it expected behavior?

I tried adding some kind of wrapper to prevent page from rendering before pdf file is ready:

export const PageWrapper: React.FC<{ children: ReactNode }> = ({
  children,
}) => {
  const documentContext = useDocumentContext();
  if (
    !documentContext ||
    !documentContext?.pdf ||
    documentContext?.pdf.numPages < 1
  ) {
    return <></>;
  }
  return <>{children}</>;
};

<Document><PageWrapper><Page .... /></PageWrapper></Document>

but getting the same error..

Does anyone have idea on this?

[wojtekmaj]

Read the docs. Define your options outside of React component or memoize it if you absolutely have to have it inside.