PDF.js Express 8.7.0 UI throws lots of errors with Vue.js

WebViewer Version: @pdftron/pdfjs-express-viewer 8.7.0

Do you have an issue with a specific file(s)? any file
Can you reproduce using one of our samples or online demos? yes
Are you using the WebViewer server? no
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? yes, VueJs
Is your issue related to annotations? no

Please give a brief summary of your issue:
pdfjs-express 8.7.0 throws lots of UI errors when used with VueJS

Please describe your issue and provide steps to reproduce it:

After loading a file, the following error appears inside the console.
Various UI tools are failing (search, preview sidebar, …), and any click inside the UI cause the same error to be logged again.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'querySelector')
    at a.co (webviewer-core.min.js:476:129)
    at Qa.co (webviewer-core.min.js:338:418)
    at Proxy.yh (webviewer-core.min.js:394:158)
    at Qa.Kl (webviewer-core.min.js:377:396)
    at n.Kl (webviewer-core.min.js:1795:255)
    at n.Eaa (webviewer-core.min.js:1795:185)
    at webviewer-core.min.js:1788:256
    at new Promise (<anonymous>)
    at n.iS (webviewer-core.min.js:1788:229)
    at n.zL (webviewer-core.min.js:1777:187)

Please provide a link to a minimal sample where the issue is reproducible:

  1. Clone the official VueJS sample code from GitHub - pdfjs-express/pdfjs-express-viewer-vue-sample
  2. Upgrade webviewer dependency to 8.7.0.
  3. Run it

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello andre,

Does this happen with every file you upload?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Yes, it happens with the default Pdftron sample PDF, but also with any other. The issue is not related to the kind of document.

What I know works: PDFjsExpress 8.6.0 with Vue3 (or Vue2) and any PDF

As soon as you upgrade to to 8.7.0, the above error appears immediately after loading a document.

Hey Andre,

Looking through our commit log, I found a fix for this issue that might not have been included in the latest version of PDFJS Express Viewer, can you test with this build?

As a note, this build is for testing purposes only.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Hi @tgordon, thanks for digging into this.
I tried your version – it doesn’t show this error but unfortunately it seems to have yet another issue:

webviewer-core.min.js:213 TypeError: Cannot read properties of undefined (reading 'then')
    at n.e (index.js:92:48)
    at webviewer-core.min.js:566:262
    at Array.forEach (<anonymous>)
    at n.trigger (webviewer-core.min.js:566:194)
    at Ua.SP (webviewer-core.min.js:323:224)
    at n.<anonymous> (webviewer-core.min.js:320:376)
    at e (webviewer-core.min.js:212:188)
    at Object.next (webviewer-core.min.js:210:534)
    at h (webviewer-core.min.js:210:305)

Again, this is from your official vue sample, just upgrading the webviewer package. Are you not getting the same error there?

Hello andre,

I did not see that latest error with my version, but I was able to reproduce the initial error. The initial error will be fixed in the next version. Thank you for your patience.

This new error however, how is this reproducible?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

I’m sorry, seems like I didn’t have your version installed properly.

I’m trying it with the pdfjs-express-viewer-vue-sample, so it’s a bit complicated to get your version running. Neither npm install nor copy/pasting seems to work.

Do you have some quick instructions on how to try it?

Hello andre,

The project installs and runs with:

npm install
npm run serve

What version of node are you using?
Is there an error occurring with npm install?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Sorry I wasn’t clear. I do know how to run the sample, but I couldn’t figure out how to update it with your alternative version of the pdfjsexpress plugin. It’s not an npm package, and simply copy-pasting it to the public/lib folder is not sufficient.

Hello andre,

Thank you for clarifying, the version I sent is only for testing, when the full release with the fix is out it will be available to install through NPM.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Hi Tyler,

We’re experiencing the same error with this new test version. All we did to reproduce the error was to replace the contents of node_modules/@pdftron/pdfjs-express-viewer with the contents of the zip, and copy the public folder to a public folder ( /pdf ) on the server, which is referenced in the WebViewer options:

WebViewer(
        {
          path: `/pdf`,
          licenseKey: "xxxxxxxx",
          initialDoc: file.url,
        },

The following error is then thrown on loading the page (just once):

webviewer-core.min.js:213 TypeError: Cannot read properties of undefined (reading 'then')
    at n.e (webviewer-ui.min.js:89:1244417)
    at webviewer-core.min.js:566:262
    at Array.forEach (<anonymous>)
    at n.trigger (webviewer-core.min.js:566:194)
    at Ua.SP (webviewer-core.min.js:323:224)
    at n.<anonymous> (webviewer-core.min.js:320:376)
    at e (webviewer-core.min.js:212:188)
    at Object.next (webviewer-core.min.js:210:534)
    at h (webviewer-core.min.js:210:305)

Hi,

Same problem here with vite + vue3. The zip file version solves the first issue but introduces a new one. The traceback below should help you debug has it points to the exact source of error in PageRedactionModalContainer.js:92:48:

webviewer-core.min.js:213 
        
       TypeError: Cannot read properties of undefined (reading 'then')
    at n.e (PageRedactionModalContainer.js:92:48)
    at webviewer-core.min.js:566:262
    at Array.forEach (<anonymous>)
    at n.trigger (webviewer-core.min.js:566:194)
    at Ua.SP (webviewer-core.min.js:323:224)
    at n.<anonymous> (webviewer-core.min.js:320:376)
    at e (webviewer-core.min.js:212:188)
    at Object.next (webviewer-core.min.js:210:534)
    at h (webviewer-core.min.js:210:305)

I should add that in fact when opening a pdf file I have lot more of repeating errors in the console:

webviewer-core.min.js:213 
        
       TypeError: Cannot read properties of undefined (reading 'annotation')
    at n.<anonymous> (MeasurementOverlay.js:92:50)
    at webviewer-core.min.js:566:229
    at Array.forEach (<anonymous>)
    at n.trigger (webviewer-core.min.js:566:194)
    at Ua.MJ (webviewer-core.min.js:292:324)
    at HTMLDocument.<anonymous> (webviewer-core.min.js:297:335)