Failed prop type: Expected pageNumber to be less or equal to 10.

[KayvT]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I have a PDF, and it renders fine.

However, sometimes it shows the whole pdf and sometimes it gives this error and shows only 10 pages.

I can't reproduce it because it keep happening with the same exact pdf, but it is random.

Steps to reproduce

I only used this piece of code that I got from the wiki to show all the pages:

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

Expected behavior

It should load the whole pdf all the time.

Actual behavior

Loads 10 pages sometimes, but sometimes loads the whole pdf.

Additional information

No response

Environment

• Browser (if applicable): Brave
• React-PDF version: 4.x
• React version:16.13.1
• Webpack version (if applicable):

[jack-bgl]

Same issue observed, also using the wiki method {Array.from( new Array(numPages), (el, index) => ( <Page key={page_${index + 1}} pageNumber={index + 1}....

[marcusgahlin]

I got a similar error message when changing the file to view in my document component. Here's how it looks:
<Document id='pdfviewer' file={fileState} onLoadSuccess={onDocumentLoadSuccess} >
{[...Array(numPages).keys()].map(i => <Page key={i + 1} pageNumber={i + 1} width={width} /> )}
</Document>

Both fileState and numPages are states. When updating fileState to a new pdf, numPages won't update until the document attribute onLoadSuccsess runs. I added setNumPages(null) to trigger before the new file is handed over to <Document id='pdfviewer' file={fileState}... and this fixed the error message.

So, setting numPagesto null before the file is handed over to the <document> component solved my problem.

Not sure if you have the same issue, but I hope it can help.

[github-actions]

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.

[PYOJAN]

I have facing same issue when I changing file from multi page to single page.

{Array.from({ length: numPages }, (_, i) => i + 1).map((page) => ( <Page key={page} pageNumber={page} width={pageWidth} scale={scale} renderAnnotationLayer={false} renderTextLayer={false} /> ))}
This is my code block which i have used in my code it is working fine if i change the file with same page.

But only it happens when I change file form multi page to single page or single page to multi page.
This is the warring message:-

Warning: Failed prop type: Expected pageNumber to be less or equal to 2.

[aarowman]

As described above by @marcusgahlin, this is due to the previous state not being cleared. I ran into the same issue, needed to clear the old page / numPages from the state before rendering the new document.

It fixes itself after onLoadSuccess gets called, but the warning occurs while the new PDF is loading (in progress), and your component is still trying to render the old pages (which are ignored by Document itself).

You could reset the numPages (or other state var) to null at this time, or on your initial component render so it is always empty while document is loading.

(Note: you could try doing it in onLoadProgress, but it will try to render briefly and the warning would likely still occur)

[aarowman]

I don't think this is a bug with the library itself, because we actually are passing in an invalid pageNumber to the Page component. However, the documentation/examples could cover this use case, since we might use the same component to render different PDFs

[github-actions]

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.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.