Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lingering Worker BLOB

See original GitHub issue

I have read documentation in README
I have checked sample and test suites to see real life basic implementation
I have checked if this question is not already asked
I have done a crap ton of research for this issue…

I believe I have found a solution for this… I went ahead and created an example/demo that shows how you can dispose of the worker…

Demo using pdf.js, without react-pdf to show how to dispose of the worker using the original library - it is rather straight forward… (react-pdf wraps around pdf.js)

Demo using react-pdf to show how to dispose of the worker with this library.

The worker gets created when you run const loadingTask = pdfjs.getDocument(...) - in order to dispose of the worker you have to run loadingTask.destroy()…

Is there any way to expose the loading task so we can dispose of it if needed? Or expose an event that allows us to dispose of the worker on dismount?

What are you trying to achieve? Please describe. Find out why the worker lingers even after the react-pdf <Document/> component is unmounted.

Describe what are you trying to achieve Ex. I’d like to display multiple pages of my PDF. Free up some RAM, as I’m dealing with pretty large PDF files.

Describe solutions you’ve tried Manually dispose of the worker - but each time I run: pdfjs.getDocument(myDocUrl).destroy() it generates a new blob:http://url… which it disposes of immediately after creating it, while still keeping the original worker (the one I’m trying to destroy) around… Is there any way to destroy the worker created by react-pdf/pdfjs?

Additional information This is how I am grabbing the PDF document from my server:

...
    let response = await fetch(fetchUrl, fetchOptions);
    let blob = await response.blob();
    let objectUrl = URL.createObjectURL(blob);
    this.setState({
        file: objectUrl
    });
...

If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

From the FireFox Task Manager:

This blob url will stay around until i refresh the page… If I browse back to the page which contains the Document component, it generates a completely new blob url… This is killing RAM.

Environment