Intermitted failure to load PDF

[Jimbob001]

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'm using a create-react-app setup, and I'm seeing an intermittent issue whereby the PDF fails to load some of the time, usually after loading a PDF a while after initial refresh of the app. I've trawled issues across many sites and tried all sorts, but just can't work out what is going wrong nor a solution.

Please see the additional information, tried to explain as much as I can but it's hazy in places give the nature of the issue. Would be amazed if it's just me seeing this issue but please, put me out of my misery either way!

Steps to reproduce

• Refresh page and open PDF; works fine
• Open same or new PDF again straight after; works fine
• Large page change / amount of time passes, loading PDF again and it fails

Expected behavior

PDF should load every time

Actual behavior

PDF sometimes fails to load

Additional information

Since I'm using CRA, I'm using the CDN load technique as it's recommended. I've also tried many other implementations out of hope but they didn't work at all etc. I've tried an external CDN to cross check, but have an automated build to host the worker ourselves. So it looks something like this:

const path = ABS_APP_URL + "pdfAssets/" + pdfjs.version.replaceAll(".", "_") + "_pdf.worker.min.js";
pdfjs.GlobalWorkerOptions.workerSrc = path;

On initial page refresh and first load of the PDF, everything loads correctly. Multiple opens, new PDFs etc and everything is fine. However, the PDF fails to load some time after refresh, I use Sentry to capture the events but also have seen it with my own eyes. It doesn't have to be a long time, can only vaguely say "a lot of content change" after refresh seems to cause it, but I haven't been able to find anything concrete.

Via the production error logging, I can see this same issue across all browsers etc, also had this across a range of our own use cases. Obviously tried emptying browser caches etc, from the range of devices and the time we've had this issue, can't imagine that's the problem.

The error logged is "The API version "3.11.174" does not match the Worker version "2.16.105". 2.16.105 is last version of pdfjs we used before upgrading a while ago, for interest sake. As I said, I've tried loading directly from a CDN, as well as checking the version in our self served file; it's just not the wrong version! We also get the Setting up fake worker console log, I'm not sure if the above is because this fake worker of the wrong version?

Another possible explainer is there is no attempt to load the PDF file before this error happens. That would imply the library is failing to load before attempting to load actual content.

Even given this a go, pre-downloading the worker file before loading the React component, still no luck:

fetch(path)
.then((fetchResponse) => {
    return fetchResponse.text();
}).then((code) => {
    const codeBlob = new Blob([code], { type: "text/javascript" });
    const workerURL = URL.createObjectURL(codeBlob);
    pdfjs.GlobalWorkerOptions.workerSrc = workerURL;
});

Environment

• Browser (if applicable): All
• React-PDF version: 7.7.1
• React version: ^18.0.0
• Webpack version (if applicable):

[quarryman]

I am seeing similar issue, however I am not able to capture logs the author provided.

Behaviour I see: file is rendered correctly within CRA app. Once page is left for a few minutes, or sometimes there are a few interactions with the page not related to PDF, PDF becomes blank. It reappears if user forces rerender by changing pdf block size, which we allow. On page refresh pdf is again present as well and will again become blank after certain time

[wojtekmaj]

@quarryman Your issue is likely #1798, not that.

[wojtekmaj]

@Jimbob001 your workerSrc implementation looks fine.

I'd check if you have multiple versions of pdfjs-dist installed? You shouldn't need to add pdfjs-dist on your own to dependencies at all, it should be a secondary dependency.

Setting up fake worker is expected when PDF.js fails to load the actual worker - which, because of version mismatch, is the correct behavior.

[Jimbob001]

HI @wojtekmaj, no is the short answer.

I haven't got pdfjs-dist in my set dependencies and searching in my yarn.lock I can only find version 3.11.174 referenced.

I've just sent a donation as a thank you for your work on this library, any further help / suggestions on the above would be appreciated.

[codydaig]

I had this same issue. I had to run pdfjs-dist@v3 even though the only thing in package-lock.json requiring and setting the version was react-pdf and that was marked correctly, npm was not installing the correct version. This happened to me after the dependabot alert and change. Once I manually installed v3 manually it worked correctly.

[Jimbob001]

@codydaig literally yarn add pdfjs-dist@v3, or yarn add pdfjs-dist@v3.11.174 or yarn add pdfjs-dist@^v3.11.174?

Either way... don't think it's working for me... :/

Can you explain the dependabot alert and change? Haven't heard of it and might be something I can look into.

[codydaig]

@Jimbob001 Not sure about yarn. I'm not using yarn for this project, just npm. After the last few days, I haven't seen an error come through in over 100,000 pdf loads. npm i pdfjs-dist@v3 is all that I did in the end to get it working. Something is funky with the dependency tree though so yarn might have a slightly different interpretation and produces a slightly different result.

Here's the link to the dependabot security advisory. It bumped the react-pdf version from 6 to 7 for me and that's where all my issues started. GHSA-87hq-q4gp-9wr4

[Jimbob001]

@codydaig OK, so you've installed v3.0.0 I think, which is different from what's mean to be used by this library... odd.

I've added pdfjs-dist@v3.11.174 to my package, removing node_modules and refreshing yarn's cache, then I'll do another deployment and see what the result is.

If that doesn't work, I guess I'll upgrade to V9 and see where that takes me...

[codydaig]

@Jimbob001 Good luck. To clarify one piece, I've installed version 3.11.174

[Edwardndiyo]

i am currently facing similar challenge, trying to load pdf's using the reactpdf and the pdfjs-dist version 2.16.105.
i am currently getting the error of an API mismath becasue i previously installed v4.4.168, i uninstlled it cus it did not work as expected(it kept returning the error i am trying to setup a fake worker) so i tried a lower version, i am cyrrently stuck with the error of API mismatch i cant seem to get rid of the v 4.4.168 installed. PS i have deleted the node modules, the package-lock.json file and deleted the library and installed just the version 2 over and over again still same issue.
help !
npm ls pdfjs-dist react-pdf
wallstreet_beta@0.1.0 C:\Users\ndiyo\wallstreet_beta
├─┬ @react-pdf-viewer/core@3.12.0
│ └── pdfjs-dist@2.16.105 deduped
├── pdfjs-dist@2.16.105
└─┬ react-pdf@9.1.0
└── pdfjs-dist@4.4.168

[Edwardndiyo]

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'm using a create-react-app setup, and I'm seeing an intermittent issue whereby the PDF fails to load some of the time, usually after loading a PDF a while after initial refresh of the app. I've trawled issues across many sites and tried all sorts, but just can't work out what is going wrong nor a solution.

Please see the additional information, tried to explain as much as I can but it's hazy in places give the nature of the issue. Would be amazed if it's just me seeing this issue but please, put me out of my misery either way!

Steps to reproduce

• Refresh page and open PDF; works fine
• Open same or new PDF again straight after; works fine
• Large page change / amount of time passes, loading PDF again and it fails

Expected behavior

PDF should load every time

Actual behavior

PDF sometimes fails to load

Additional information

Since I'm using CRA, I'm using the CDN load technique as it's recommended. I've also tried many other implementations out of hope but they didn't work at all etc. I've tried an external CDN to cross check, but have an automated build to host the worker ourselves. So it looks something like this:

const path = ABS_APP_URL + "pdfAssets/" + pdfjs.version.replaceAll(".", "_") + "_pdf.worker.min.js";
pdfjs.GlobalWorkerOptions.workerSrc = path;

On initial page refresh and first load of the PDF, everything loads correctly. Multiple opens, new PDFs etc and everything is fine. However, the PDF fails to load some time after refresh, I use Sentry to capture the events but also have seen it with my own eyes. It doesn't have to be a long time, can only vaguely say "a lot of content change" after refresh seems to cause it, but I haven't been able to find anything concrete.

Via the production error logging, I can see this same issue across all browsers etc, also had this across a range of our own use cases. Obviously tried emptying browser caches etc, from the range of devices and the time we've had this issue, can't imagine that's the problem.

The error logged is "The API version "3.11.174" does not match the Worker version "2.16.105". 2.16.105 is last version of pdfjs we used before upgrading a while ago, for interest sake. As I said, I've tried loading directly from a CDN, as well as checking the version in our self served file; it's just not the wrong version! We also get the Setting up fake worker console log, I'm not sure if the above is because this fake worker of the wrong version?

Another possible explainer is there is no attempt to load the PDF file before this error happens. That would imply the library is failing to load before attempting to load actual content.

Even given this a go, pre-downloading the worker file before loading the React component, still no luck:

fetch(path)
.then((fetchResponse) => {
    return fetchResponse.text();
}).then((code) => {
    const codeBlob = new Blob([code], { type: "text/javascript" });
    const workerURL = URL.createObjectURL(codeBlob);
    pdfjs.GlobalWorkerOptions.workerSrc = workerURL;
});

Environment

• Browser (if applicable): All
• React-PDF version: 7.7.1
• React version: ^18.0.0
• Webpack version (if applicable):

if this hasnt been solved yet i have a solution, some pdfs are loading and some arent loading because of the naming of the pdfs. try this - take out the spaces you find in the names of the pdf and itl'l work perfectly well.

[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.

[pranavavva]

@codydaig literally yarn add pdfjs-dist@v3, or yarn add pdfjs-dist@v3.11.174 or yarn add pdfjs-dist@^v3.11.174?

Either way... don't think it's working for me... :/

Can you explain the dependabot alert and change? Haven't heard of it and might be something I can look into.

this worked however drop the v from your install command: yarn add pdfjs-dist@3.11.174