TypeError: Cannot read from private field in pdf js develop by firefox

Question

I am using pdfjs to show a pdf in a modal and i am using alpine js for this functionality

The pdf has multiple files and I want to display the nav button at the top of the pdf so that the user can navigate but I get this error:

Uncaught (in promise) TypeError: Cannot read from private field

I am open to any ideas
Thanks in advance

Here is my code:

pdfInstance: false,

   createPdf() {
        PDFJS.getDocument(option.url).promise.then(pdf => {
            this.pdfInstance = pdf;
            this.renderPage(1);
        });
    },
    
    renderPage(page) {

        this.pdfInstance.getPage(page).then(page => {

               console.log(page)
        })

    }

I expected to see the pdf but I always get this error. If I don't assign the pdf to pdfInstance it works fine but then I want to render another page so I'll have to create the document every single time and I don't know if that's a good idea

This code works but I don't think it's valid because I'll have to create the document every time I render a new page

 createPdf(page) {

        PDFJS.getDocument(option.url).promise.then(pdf => {
          
             pdf.getPage(page).then(page => {

               console.log(page)
             })
           
            this.renderPage(1);
        });
    },
   

Answer 1

Hi just leaving this for anyone with the same problem

turn out that AlpineJs behavior is to turn any data property into a proxy in order to make it reactive so if you want any of alpinejs property not to be reactive you can declare them as variables and not as alpine data property like so

export default (option) => {
    let pdfInstance;
  
     return { 
        createPdf() {
            PDFJS.getDocument(option.url).promise.then(pdf => {
                pdfInstance = pdf; 
                this.renderPage(1);
            });
        },

        renderPage(pageNumber) {
            pdfInstance.getPage(pageNumber)

        }

     }

   }