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.01k stars 861 forks source link

Unable to find Document context while using Thumbnail with a "pdf" property. #1732

Closed denyskotsur closed 4 months ago

denyskotsur commented 4 months ago

Before you start - checklist

Description

I have the components structured like this (just posted the main idea):

import { Document, Page, Thumbnail } from "react-pdf";

const PDFMain = () => {
  const file = "...somebase64";
  const [pdf, setPDF] = useState(null);

  return (
    <>
      {pdf && <Thumbnail pageNumber={1} pdf={pdf} />}

      <Document
        file={`${PDF_BASE_64_MIME_PREFIX}${file}`}
        onLoadSuccess={documentLoadHandler}
      >
        <Page
          ...other props
          onLoadSuccess={setPDF}
          renderAnnotationLayer={false}
          renderTextLayer={false}
        />
      </Document>
    </>
  );
};

I receive an error, even if a pdf exists and is marked as a PDFDocumentProxy.

Uncaught Error: Invariant failed: Unable to find Document context. Did you wrap <Page /> in <Document />?
image

According to the description, I can provide the object to make it work without wrapping it into another Document layer.

image

How can it be resolved? What can I do incorrectly?

Click here to find a link to devbox to check by yourself

Thanks!

Steps to reproduce

  1. Load the document and save the PDFProxyDocument object to a local state.
  2. Pass the saved object to the Thumbnail component, which is placed outside of the initial Document and which is not wrapped by another Document component.
  3. Thumbnails are not loading.

Expected behavior

Thumbnails should appear and read the data from the passed PDFProxyDocument object.

Actual behavior

App crashes because of the error Uncaught Error: Invariant failed: Unable to find Document context. Did you wrap <Page /> in <Document />?

Additional information

No response

Environment

wojtekmaj commented 4 months ago

Duplicate of #1709