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