You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The Outline for PDFs will generate and will be accurate. However, no matter which link I click on, it will instantly throw this runtime error, even when no callback function is called in the onItemClick attribute:
Invalid pageIndex request.
at WorkerTransport.getPageIndex (webpack-internal:///./node_modules/pdfjs-dist/build/pdf.js:2408:29)
at PDFDocumentProxy.getPageIndex (webpack-internal:///./node_modules/pdfjs-dist/build/pdf.js:1223:28)
at eval (webpack-internal:///./node_modules/react-pdf/dist/esm/OutlineItem.js:56:20)
at Generator.next (<anonymous>)
at fulfilled (webpack-internal:///./node_modules/react-pdf/dist/esm/OutlineItem.js:14:58)
Even when I directly copied your Recipes example into the Sample.tsx for CRA5 file, it produced this error. I also put a console.log inside that callback but it does not execute, which I'm guessing means getPageIndex is receiving a null object, one of the conditions for that error to fire off.
I also tried explicitly typing the callback function params, but still same:
functiononItemClick({pageNumber : itemPageNumber} : {pageNumber : number}){console.log("THIS NUMBER? "+itemPageNumber+" this type is "+typeof(itemPageNumber))setPageNumber(itemPageNumber);}
I also copied all other Recipes directly into that file as well, and they all work, including using onItemClick as the Document attribute. But this particular circumstance of Outline using onItemClick does not work ever, EXCEPT on one PDF where the Outline generated was actually really bad and incorrect. Those links all "worked" and went to certain pages, but not really organized or aligned to the pdf's context.
Here is my component code (stripped down for easier read, there is button, input, etc):
importReact,{useState,useCallback}from'react'import{pdfjs,Document,Page,Outline}from'react-pdf'import{useResizeObserver}from'@wojtekmaj/react-hooks'import'react-pdf/dist/esm/Page/AnnotationLayer.css';import'react-pdf/dist/esm/Page/TextLayer.css';import{VisuallyHiddenInput}from'./CustomBtn';import{Button}from'@mui/joy';importDriveFileMoveIconfrom'@mui/icons-material/DriveFileMove';importtype{PDFDocumentProxy}from'pdfjs-dist';pdfjs.GlobalWorkerOptions.workerSrc=newURL('pdfjs-dist/build/pdf.worker.min.js',import.meta.url,).toString();//non-latin character renderingconstoptions={cMapUrl: '/cmaps/',standardFontDataUrl: '/standard_fonts/',};constresizeObserverOptions={};typePDFFile=string|File|null;functionhighlightPattern(text,pattern){returntext.replace(pattern,(value)=>`<mark>${value}</mark>`);}exportconstPDFViewer=()=>{const[file,setFile]=useState<PDFFile>('');const[numPages,setNumPages]=useState<number>(1);const[pageNumber,setPageNumber]=useState<number>(1);const[containerRef,setContainerRef]=useState<HTMLElement|null>(null);const[containerWidth,setContainerWidth]=useState<number>();const[searchText,setSearchText]=useState<string>('');consttextRenderer=useCallback((textItem)=>highlightPattern(textItem.str,searchText),[searchText]);functiononTextChange(event: React.ChangeEvent<HTMLInputElement>){setSearchText(event.target.value);}constonResize=useCallback<ResizeObserverCallback>((entries)=>{const[entry]=entries;if(entry){setContainerWidth(entry.contentRect.width);}},[]);useResizeObserver(containerRef,resizeObserverOptions,onResize);functiononFileChange(event: React.ChangeEvent<HTMLInputElement>): void{const{ files }=event.target;if(files&&files[0]){setFile(files[0]||null);}}functiononDocumentLoadSuccess({numPages: nextNumPages}: PDFDocumentProxy): void{setNumPages(nextNumPages);setPageNumber(1);}functiononItemClick({pageNumber : itemPageNumber}){console.log("THIS NUMBER? "+itemPageNumber+" this type is "+typeof(itemPageNumber))setPageNumber(itemPageNumber);}return(<divclassName="pdf-container"><divclassName="current-document"ref={setContainerRef}><Documentfile={file}onLoadSuccess={onDocumentLoadSuccess}options={options}onItemClick={onItemClick}><OutlineonItemClick={onItemClick}/><PagepageNumber={pageNumber||1}customRenderer={textRenderer}/></Document></div></div>)}
2. Got to Recipes, copy "Display Interactive Table of Contents" pieces into Sample.tsx
3. Replace the Page element with the one from Recipes.
4. Use the input to load a PDF, click on any of the Outline-populated links for the PDF.
Expected behavior
Jump to page in PDF
Actual behavior
All Outline links throw the same error:
Invalid pageIndex request.
at WorkerTransport.getPageIndex (webpack-internal:///./node_modules/pdfjs-dist/build/pdf.js:2408:29)
at PDFDocumentProxy.getPageIndex (webpack-internal:///./node_modules/pdfjs-dist/build/pdf.js:1223:28)
at eval (webpack-internal:///./node_modules/react-pdf/dist/esm/OutlineItem.js:56:20)
at Generator.next (<anonymous>)
at fulfilled (webpack-internal:///./node_modules/react-pdf/dist/esm/OutlineItem.js:14:58)
Additional information
Please help :'(
Environment
Browser (if applicable): Microsoft Edge
React-PDF version: 7.7.1
React version: 18.0.0
Webpack version (if applicable):
The text was updated successfully, but these errors were encountered:
Before you start - checklist
Description
The Outline for PDFs will generate and will be accurate. However, no matter which link I click on, it will instantly throw this runtime error, even when no callback function is called in the onItemClick attribute:
Even when I directly copied your Recipes example into the Sample.tsx for CRA5 file, it produced this error. I also put a console.log inside that callback but it does not execute, which I'm guessing means getPageIndex is receiving a null object, one of the conditions for that error to fire off.
I also tried explicitly typing the callback function params, but still same:
I also copied all other Recipes directly into that file as well, and they all work, including using onItemClick as the Document attribute. But this particular circumstance of Outline using onItemClick does not work ever, EXCEPT on one PDF where the Outline generated was actually really bad and incorrect. Those links all "worked" and went to certain pages, but not really organized or aligned to the pdf's context.
Here is my component code (stripped down for easier read, there is button, input, etc):
Steps to reproduce
1. Go to Sample.tsx file in CRA sample directory, copy and paste directly into new file.
2. Got to Recipes, copy "Display Interactive Table of Contents" pieces into Sample.tsx
3. Replace the Page element with the one from Recipes.
4. Use the input to load a PDF, click on any of the Outline-populated links for the PDF.
Expected behavior
Jump to page in PDF
Actual behavior
All Outline links throw the same error:
Additional information
Please help :'(
Environment
The text was updated successfully, but these errors were encountered: