• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Problem with Embed PDF: [mobx] Invariant failed: Since strict-mode is enabled

New Here ,
Dec 13, 2021 Dec 13, 2021

Copy link to clipboard

Copied

Hi,

I'm just getting started with Embed PDF...

When I try to load a PDF I get the error:

Uncaught Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: AppStore@40.isHidingBranding
at nt (dc-mobx.js:16)
at tt (dc-mobx.js:16)
at Xt (dc-mobx.js:16)
at t.prepareNewValue (dc-mobx.js:16)
at Se (dc-mobx.js:16)
at AppStore.set [as isHidingBranding] (dc-mobx.js:16)
at AppStore.initialize (AdobeDCViewApp.js:2)
at JAOs.window.renderApp (AdobeDCViewApp.js:2)
at MessageExecutor._executeAction (ViewSDK.js:1)
at MessageExecutor._takeAction (ViewSDK.js:1)

To be honest I'm not sure what this "really" means but I wasn't expecting to have to figure out what "mobex actions" are to try and get this working... 😞

The application is a simple "lit html" web components based app running entirely client side.

In the page HTML I use an event listener to mark when the sdk is ready:

    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
    <script type="text/javascript">

      var adobeDcSdkReady = false;
      var adobeDCView;

      document.addEventListener("adobe_dc_view_sdk.ready", function() {
        console.log(`addEventListener (adobe dc) - triggered`);
        adobeDcSdkReady = true;
      });

    </script> 

Then in a window.onload function (which uses ES6 imports, so is probably running in javascript strict mode) I initialise the viewer:

if (adobeDcSdkReady) {
    console.log(`window onload (adobe dc) - key is: ${adobeEmbedPdfKey}`);
    adobeDCView = new AdobeDC.View({clientId: adobeEmbedPdfKey, divId: "adobe-dc-view"});
} else {
    console.log(`window onload (adobe dc) - not ready`);
}

In the browser console I see the line "window onload (adobe dc) - key is", so I think the viewer is being created with a valid key after the sdk is initialised.

Finally I try to view a PDF file (which is available as an ArrayBuffer) by doing:

if ((this.pdfFileArrayBuffer) && (this.adobeDCView)) {
    this.adobeDCView.previewFile({
        content: { promise: this.pdfFileArrayBuffer },
        metaData: { fileName: "preview.pdf" }
    });
}

This is where the exception (at the top of this post) is thrown.

Any suggestions/pointers gratefully received.

Cheers, Andy

TOPICS
PDF Embed API

Views

102

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Dec 15, 2021 Dec 15, 2021

Ah yes,. this is expected as the result of previewFile is a promise. I'm glad you got it working!

Likes

Translate

Translate
Adobe Employee ,
Dec 14, 2021 Dec 14, 2021

Copy link to clipboard

Copied

That is... interesting. Do you have code I could try to run here to replicate this? I know you shared a lot of code above, but could you share something more inline that I could use as a basis?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 15, 2021 Dec 15, 2021

Copy link to clipboard

Copied

Hi, thanks for responding.

I created a standalone example (repo in github) - which worked! 🙂

The change was trivial, in my app I added an await on the call to previewFile(), so the code is now:

await this.adobeDCView.previewFile({
    content: { promise: this.pdfFileArrayBuffer },
    metaData: { fileName: "preview.pdf" }
});

(the example app is almost the same)

I'm only just starting to use javascript again, there have been lots of improvements since I last used it but I am going to have to find a linting tool that highlights potential missing await statments...

Cheers, Andy

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 15, 2021 Dec 15, 2021

Copy link to clipboard

Copied

LATEST

Ah yes,. this is expected as the result of previewFile is a promise. I'm glad you got it working!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources