pdfjs error on iframe with pdfjs viewer

[pradeepkasula]

Hi,

I am taken latest pdfjs (5.4.54) and placed in my webapp folder, used viewer.html in iframe with sample.pdf file url. In browser, I am getting below error instead of opening sample pdf file. can you please suggest how to fix this?

fyi, actually I am trying with
http://localhost:8080/pdfjs/web/viewer.html?file=/app/ImageToPdfService/Document/2048343] -- file url gives pdf byts, this case failing to render.
I used below for testing to render sample.pdf, this one also failing.
http://localhost:8080/pdfjs/web/viewer.html?file=

Understanding the problem
The error "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')" indicates that you are trying to call the addEventListener method on a variable that is currently null. In the provided code, this is happening on the line this.document.addEventListener("mouseup", boundEndPan, mouseOpts);. This means that this.document is null when this line is executed.
This often occurs when an element is expected to be present in the DOM but hasn't been loaded yet, or if the element doesn't exist with the expected selector or reference.
Suggested fix
Ensure that this.document is properly initialized and refers to a valid DOM element or the document object itself before attempting to attach an event listener to it.
If this.document is intended to refer to the main document object, there's no need to store it in this.document and you can directly use document.addEventListener.
If this.document is meant to be a reference to a specific DOM element, make sure that the element has been retrieved correctly and is not null. You might need to wait for the DOM to be fully loaded before attempting to access and attach event listeners to elements.
Based on the context provided in the error trace (PDFFindBar), it's highly likely that this.document should simply be document.
js

// Directly use document.addEventListener
document.addEventListener("mouseup", boundEndPan, mouseOpts);
// When a scroll event occurs before a mousemove, assume that the user
// dragged a scrollbar (necessary for Opera Presto, Safari and IE)
// (not needed for Chrome/Firefox)
this.#scrollAC = new AbortController();
this.element.addEventListener("scroll", boundEndPan, {
capture: true,
signal: this.#scrollAC.signal,
});
stopEvent(event);
const focusedElement = document.activeElement;
if (focusedElement && !focusedElement.contains(event.target)) {
focusedElement.blur();
}
Use code snippets with caution
Summary
The error "Cannot read properties of null (reading 'addEventListener')" arises when addEventListener is called on a null object. In this case, this.document is null. The fix is to ensure this.document refers to a valid object before calling addEventListener, or if it's meant to be the global document object, simply use document directly.