Express Viewer Pan does not work: "undefined (reading 'querySelector')" -> #pageWidgetContainer

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.0

Detailed description of issue
Hi,
I have integrated PDF.js Express Viewer in Vue 3 and everything is working fine except the Pan Button. I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘querySelector’)
at (webviewer-core.min.js:476:129)

So, I can’t move by mouse click. At this point Express Viewer is looking for “#pageWidgetContainer1” and so on. I don’t know what the problem is, because all other functions available and die DOM contains the missing elements.

Expected behaviour
Move through the PDF by mouse click or finger touch.

Does your issue happen with every document, or just one?
Yes, with every document, but NOT when I load PDF.js Express instead of PDF.js Express Viewer!

Link to document

Code snippet

<template>    
    <div :id="'pdf-viewer-'+appInstance" class="pdf-viewer"></div>
</template>

<script>
    import { defineComponent } from "@vue/runtime-core";
    import WebViewer from '@pdftron/pdfjs-express-viewer';

    export default defineComponent({
        name: "PdfViewer",
        data() {
            return {
                appInstance: 12345,
                url: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf'
            }
        },
        mounted() {
            const viewer = document.getElementById('pdf-viewer-'+this.appInstance);

            WebViewer({
                path: '/schrage-portal-test/pdfviewer_assets/', // point to where the files you copied are served from                
                licenseKey: '.........',
                initialDoc: this.url
            }, viewer).then((instance) => {
                const theme = instance.UI.Theme;
                instance.UI.setTheme(theme.DARK);
                instance.UI.setLanguage('de');

                const { Core, UI } = instance;

                Core.documentViewer.addEventListener('documentLoaded', () => {
                    console.log('document loaded');
                });
            })
        },
    });
</script>

<style>
    .pdf-viewer {
        width: 100%;
        height: 100%;
    }
</style>

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:

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Hello h.peters,

I was unable to reproduce this issue with the Vue sample updated to v8.7, I have attached a compressed copy of my code.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron
pdfjs-express-vue-sample-master.zip (7.6 MB)


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Hi Tyler,

yes, your example is working, but you are using the assets from “PDF Express Plus”. With these assets my code is also working. I just have the problems, when I am working with the assets from “PDF Express Viewer”.

Not working:

npm i @pdftron/pdfjs-express-viewer

Working:

npm i @pdftron/pdfjs-express

Best regards,
Helge

Hello h.peters,

I wasnt able to reproduce it with PDFJS Express Viewer, can you provide a minimal sample to reproduce the issue?

Thanks!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Hello Tyler,

the project is too big to produce a minimal example in short time. I went ahead with Mozilla pdf.js and a small own UI. This is working fine for me now.

I will come back to PDFJS Express when the premium features are needed.

Thank you for your support.
Best regards,
Helge

hello Tyler,
Here is my demo,I met the same issue.
Please check the package version,I’m trying this now. Everything else is normal at present. This is the only problem that bothers me
pdfjs-express-viewer-vue-sample.zip (2.2 MB)

Hello geralt.yang and h.peters,

I have generated a build with the fix here: PDFJSExpress-view-only-8.7.0 2.zip - Google Drive

We are looking to release an 8.7 patch release to include this fix.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

1 Like

Thank you so much. It really works. It’s very helpful to me. Have a nice day

Hi Tyler,

Thanks for the patch download, really helps!

Is there a release date for this patch as a NPM official version?

Thanks again.

Hello idan,

We are looking into pushing the updated build today.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Hi! Any update on the new patch release (to npm)? Still getting said issue in PDFJS Express Viewer 8.7.0, which is breaking thumbnails and search, and can confirm the patched version you posted in this thread does fix issue.

Thanks!

Hello victor.repkow,

Apologies for the delay we are planning on releasing an updated 8.7 build later today.

Best regards,
Tyler Gordon

1 Like

Hi was the build released for this bug?

Hello rbramasco,

The npm has been updated!

Best regards,
Tyler