sendWithPromise("GetPage", ... null causing an error #974
Comments
|
Looks like it's this bit... Interesting. Could it be the changes from #947? |
|
Thanks for the quick response. I loaded it up on a staging site/back to 5.7.2. This shows a gap in our testing to test this far (more than one document loaded in the background). I did look to see if there's a direct call relevant there. I added an expanded callstack trace attached below, I think your hunch is right. It could be that I'm using it wrong too. Here's a gist on the background renderer class-based component I have. This is a child of another component managing its state so the active file comes down as a prop. Also the functional instance is a sibling/same depth as this functional one. Maybe it's the async
|
|
Am facing the same issue, hoping for this to get fixed soon. Thanks! |
|
Not a solution but I've capped the |
|
We've hit the same situation with an application using react 16.14. The first PDF seemed to load fine, but remounting or changing to a new PDF would result in errors. Was able to workaround by rolling back to 5.7.1 as others have. Don't have much else to add to previous reports, but did want to note that the root cause was one of a number of different errors on different subcomponents from Page down. For future search-ability, figured it was worth adding examples from a dev bundle created with 5.7.2: |
|
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`m having the same problem. Is this being addressed? |
|
Does anyone have a reproducible CodeSandbox repo? I'm especially interested if this is still reproducible in v6. |
|
We have this issue for the following flow:
|
|
We're having the same issue on v6.2.0. Reverting to v5 fixes it. We haven't been able to reproduce locally but it does happen in production and we're getting many errors. We re-render with different files many times during the component's lifetime.
|
|
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 think we solved the issue. It's mostly in the user-code together with internal logic of component. `import React, { useState } from 'react'; function MyApp() { function onDocumentLoadSuccess({ numPages }) { function setNewFile(){ return ( {Array.from(new Array(numPages), (_, index) => ( <Page key={index} pageNumber={index + 1} /> ), )} { /* here we render all pages of file, but if new file is being loaded, we try loading pages that are not available */ }
); }` |
|
I found a related issue in react-pdf-viewer that was due to reusing a destroyed worker:
It seems that we're encountering this bug when changing loading blob A then blob B very quickly. My guess is that when page 1 of blob A gets to load, the worker for blob A is already destroyed because blob B is now loading. |
|
Just add useAsync or your own implementation when generating the url, the @ldiqual response is correctly, it changes from a to b very quickly and the worker is not setted. Also, if you gonna using some reactivity, i recommend using debounce in function that change url also I was used react-pdf/@ReneDer and change to jsPDF and the issue continued, and this is what i did Here is a code reference how to fix react-pdf/@Renderer if someone is using https://github.com/diegomura/react-pdf-site/tree/master/src/components/Repl |
|
Weird. I've only now started getting this error when trying to migrate to v7. |
|
Hello, I encountered the exact same problem after updating from v6.2.2 to v7.1.1. I solved it controlling the page rendering. I allow my app to render the page only if the document has been successfully loaded (onDocumentLoadSuccess). |
|
hey - can you add an example how did you resolved it ?@cattale93 |
|
The error can be temporarily bypassed by using: |
Hello @WoldemortRules <Document
className={'PDFDoc'}
file={fileLocation}
onLoadSuccess={this.onDocumentLoadSuccess} // the pdf is rendered only based on a specific state in this function.
onSourceError={this.onLoadError}
onLoadError={this.onLoadError}
renderMode={'canvas'}
onItemClick={this.goToPage}
options={{ cMapUrl: 'cmaps/', cMapPacked: true,}}
>According to the documentation onLoadSuccess -> Function called when the document is successfully loaded. |
|
Same issue here with v6.0.3. Any news on a fix for this? We can do conditional rendering, but as this worked in V5, it would be nice if this worked in React 18 versions of react-pdf. |
|
I am facing the same issue when using 7.3.3. |
|
It seems I solved the problem. |
|
I only got this error when I resized the screen using the responsive dev tool, here is my call stack |
|
My issue was solved by @illusdolphin. So you just test the nextNumPage. |
step 1
step 2` const onDocumentLoadSuccess = (...args) => { }` step 3
|
|
For me it worked after simply wrapping my Pdf Component with React.memo.
|
|
For anybody still struggling, I got it to work on our side by using the method from this comment on a closed duplicate of this issue. I'm using Next.js
Then, within your app where you'd like to setup the worker: Honestly, I'm not totally sure why this worked. So, if anybody has a better understanding definitely feel free to reply. I'd be curious. Hope this helps! |
Hi, I'm using Nextjs too and I also read the relative post about this issue but I don't understand this part
the react-pdf is inside the node_modules so this make me a bit confuse, hope you can help me, appreciate |
So, this method didn't actually end up resolving my issue. It made it less likely to occur, and we didn't see it for a bit but since making this post I've had the same issue a handful more times now. If anybody is able to find a true solution I'd really appreciate it. If you'd still like to try that method you should see that react-pdf has a node_modules inside of it, despite it being inside of your project's node_modules. The full filepath should be |
|
我在添加自定义cMapUrl的时候也报这个错，之后把option给缓存就不会有这个问题了。 const opt = useMemo(() => {
return {
cMapUrl: '/bcmaps/',
cMapPacked: true,
};
}, []);
...
return (
<Document options={opt}>
{...}
</Document>
); |
Did you solved the error? |
|
for anyone still facing this error, @illusdolphin and @jhunexjun 's answer worked for me for the latest version with a few edits. from @jhunexjun's answer, i had to make 2 small changes
const [isDocumentReady, setIsDocumentReady] = useState(false);
function onDocumentLoadSuccess({numPages}) {
setNumPages(numPages);
setIsDocumentReady(true)
}
.
.
.
return(
<Document
file={file}
onLoadSuccess={onDocumentLoadSuccess}
options={{
cMapUrl: 'cmaps/',
cMapPacked: true,
}} >
{isDocumentReady && Array.from(new Array(numPages), (el, index) => (
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
))}
</Document>
); |
|
Thanks for all the help! Here's a similar solution that uses |
|
Hey everyone, If anyone is experiencing this issue, I found a fix in React with Vite by removing StrictMode from main.tsx. It appears that the problem arises when the component renders twice. I'm using the example provided by the developers. |
This fixed my issue thank you @vaibhavpras |
and others
Before you start - checklist
Description
I use two instances of react-pdf. The main viewer is using a functional component and the second one is a class-based that's not visible. It's a background renderer to produce pdf thumbnail previews. This has been working fine since 2021.
After recently pulling down 5.7.2 my background PDF render throws an error just before it renders. After reverting to 5.7.1 it's working fine.
I put error handlers on the
<Document...and<Page... I haveonSourceError,onLoadError,onRendeErrorhandlers but those don't fire, the error above happens.I will continue investigating/work on reproducible code unfortunately what I'm working on is not public.
Attached below are the images of the error.
Steps to reproduce
Setup a class-based react-pdf component.
Pass down a file path (by props), it renders.
Pass down another file path
Expected behavior
The PDFs render as the sources are updated.
Actual behavior
Fails to render the PDF/produces the errors below
When this error happens it crashes the entire react app eg. blank screen.
Additional information
No response
Environment
The text was updated successfully, but these errors were encountered: