Full version of PDFNetJS has not been loaded

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.0

Detailed description of issue
We are seeing the following error without any code changes on our side:

Uncaught (in promise) Error: Full version of PDFNetJS has not been loaded. Please pass the "fullAPI: true" option in your WebViewer constructor to use the PDFNet APIs.
    at Object.get (webviewer-core.min.js:2408:73)
    at Proxy.toString (<anonymous>)
    at isPlainObject (vue.esm.js?4b29:55:1)
    at observe (vue.esm.js?4b29:967:1)
    at defineReactive (vue.esm.js?4b29:991:1)
    at new Observer (vue.esm.js?4b29:941:1)
    at observe (vue.esm.js?4b29:972:1)
    at defineReactive (vue.esm.js?4b29:991:1)
    at new Observer (vue.esm.js?4b29:941:1)
    at observe (vue.esm.js?4b29:972:1)

Trying to workaround it by following the instructions I get this:

Uncaught (in promise) Error: "fullAPI" is not a valid constuctor option for PDF.js Express. Please make sure you are referring to the proper documentation (https://pdfjs.express/documentation)
    at c.WebViewer._getHTML5OptionsURL (webviewer.min.js:1:17886)
    at c.WebViewer._createHTML5 (webviewer.min.js:1:20498)
    at c.WebViewer._createViewer (webviewer.min.js:1:14742)
    at c.WebViewer._create (webviewer.min.js:1:13020)
    at c.WebViewer.create (webviewer.min.js:1:12797)
    at new c.WebViewer (webviewer.min.js:1:12494)
    at webviewer.min.js:1:26794
    at new Promise (<anonymous>)
    at v (webviewer.min.js:1:25339)
    at VueComponent.loadWebViewer (UiPdfViewer.vue?bc8e:75:1)

I am unsure how this is caused without code changes on our side but this is very worrying and hope there is a quick fix.

Expected behaviour
The PDF.js Express viewer to work.

Does your issue happen with every document, or just one?
Every.

Link to document
Not needed.

Code snippet
No snippet to share.

3

Hi there,

Thank you for contacting pdf.js express forums,

Are you using any PDFNet in your code?
i.e. something like

  const { documentViewer, annotationManager, PDFNet } = instance.Core;

  documentViewer.addEventListener('documentLoaded', async () => {
    await PDFNet.initialize();
  })

Can you share your WebViewer constructor? there shouldn’t be a ‘fullAPI’ option for pdf.js express.

Thank you in advance.

Best regards,
Kevin Kim


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

4

No, we are not and have never (I don’t even know what it is).

We are invoking the WebViewer with these arguments:

{
    "path": "/build/pdfjs/8.7.0",
    "licenseKey": null,
    "disableLogs": false,
    "enableAnnotations": false,
    "disableFlattenedAnnotations": true
}

(license key is filled, but left it out in this example)

5

Hi Alex,

Thank you for your response,

Can you try with a minimal WebViewer constructor and see if the issue is reproducible?

It looks like you are using a Vue integration, can you confirm if there were any path or other environment changes? Integrate Vue.js & JavaScript PDF Viewer | PDF.js Express SDK

If you are still experiencing this issue, can you please share a minimal runnable sample project so we can reproduce on our end?

Thank you in advance.

Best regards,
Kevin Kim


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

6

So this is interesting, and thanks for your comments because that helped with debugging here.

I already couldn’t understand what was going because I doubted it could be related to a remote issue.

The problem here is that we store the WebViewer instance in a Vue component property.

However, it seems that recent changes in Vue or some other support library causes some code to be executed in the WebViewer instance. I would never have expected this to happen and I also haven’t totally locked down what is even happening or why.

We ended up fixing it by making sure we store the WebViewer instance non-reactive (was not needed to be reactive in the first place but that’s just how Vue works).

I don’t have the bandwidth to extract the meaninful parts from our environment to a small enough example unfortunately at this moment, sorry for that. But hopefully this thread helps any other Vue user when they run into this.

7

Hi Alex,

Glad that worked out for you!

Thank you for sharing your update.

Best regards,
Kevin Kim


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

8

Hi alex, could you give more detail how you can fix this in vue js (some code or some description will help), thanks

9

We had something along the lines of:

    export default {
        data() {
            return {
                options: { /* ... */ },
                webviewer: null,
            };
        },

And later in our code we did this.webviewer = instance after we instantiated the webviewer. This causes the this.webviewer to be reactive, so our simple fix was to remove webviewer from the data() which prevents that from happending. We still do this.webviewer = instance so we can reference it but don’t pre-fill it in our data().

    export default {
        data() {
            return {
                options: { /* ... */ },
-               webviewer: null,
            };
        },

Hope that helps :sweat_smile:

1 Like