react-pdf
react-pdf copied to clipboard
Failed prop type: Expected `pageNumber` to be less or equal to 10.
Before you start - checklist
- [X] I followed instructions in documentation written for my React-PDF version
- [X] I have checked if this bug is not already reported
- [X] I have checked if an issue is not listed in Known issues
- [X] 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):
Same issue observed, also using the wiki method {Array.from( new Array(numPages), (el, index) => ( <Page key={page_${index + 1}} pageNumber={index + 1}....
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 numPages
to 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.
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.
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.
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)
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
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.
This issue was closed because it has been stalled for 14 days with no activity.