Skip to main content
A
Andy22233370i494
Participant
December 13, 2021
Answered

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

  • December 13, 2021
  • 1 reply
  • 1649 views

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

This topic has been closed for replies.
Correct answer Raymond Camden

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

1 reply

Raymond Camden
Community Manager
Raymond CamdenCommunity Manager
Community Manager
December 14, 2021

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?

A
Andy22233370i494Author
Participant
December 15, 2021

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

 

Raymond Camden
Community Manager
Raymond CamdenCommunity ManagerCorrect answer
Community Manager
December 15, 2021

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices