Getting an error Cannot load document in Document Review RangeError: Maximum call stack size exceeded

Technical Support
1

Product:
Webviewer

Product Version:
10.8.0

Please give a brief summary of your issue:
Getting an error
Cannot load document in Document Review RangeError: Maximum call stack size exceeded

Please describe your issue and provide steps to reproduce it:

private webViewerInstance: WebViewerInstance;
initWebViewerInstance(elementRef: ElementRef): Promise<WebViewerInstance> {
   return this.createWebViewerInstance(elementRef).then(webViewerInstance => {
     this.webViewerInstance = webViewerInstance;
     return this.webViewerInstance;
   });
 }

private createWebViewerInstance(elementRef: ElementRef): Promise<WebViewerInstance> {
   return WebViewer(
     {
       path: 'assets/pdftron/10.8.0/public/',
       css: 'assets/pdftron/css/styles.css',
       config: 'assets/pdftron/config.js',
       licenseKey: pdftron.licence,
       preloadWorker: 'pdf'
     },
     elementRef.nativeElement
   ) as Promise<WebViewerInstance>;
 }

public loadDocument(documentInfo: DocumentInfo): void {
  if (this.webViewerInstance && documentInfo?.content) {
     const {Core: coreInstance, UI: uiInstance} = this.instanceViewer;
     uiInstance.setFitMode(FitWidth);
     const {documentViewer} = coreInstance;
     documentViewer
       .loadDocument(new File([documentInfo?.content], documentInfo.name), {extension: 'pdf'})
       .catch(err => console.error('Cannot load document in Document Review', err));
   }
}

closeDocument(): void {
   if (this.webViewerInstance) {
     this.deleteAllAnnotations();
     this.webViewerInstance.Core.documentViewer.closeDocument();
   }
 }

Hello,

Above is the code i am using in my app.
initWebViewerInstance method i am using it for initializing the webviewer.
loadDocument method i am using it for loading the document into the webviewer.
closeDocument method i am using this method when i am removing the existing document to Reinitializes data and clears the viewer area content.

  1. First i initialze the webviewer using initWebViewerInstance method.
  2. Then load document into viewer using the loadDocument method.
  3. Document is successfully loaded into the viewer with out any issues.
  4. Now i remove the existing document and call the closeDocument method to Reinitializes data and clears the viewer area content.
  5. Next i load another document into the viewer using the method loadDocument with same webviewer instance which was already created and stored in webViewerInstance variable.
  6. Then i am getting the below error
    Cannot load document in Document Review RangeError: Maximum call stack size exceeded
    at webviewer-core.min.js:872:145
    at Array.forEach ()
    at r.trigger (webviewer-core.min.js:872:53)
    at ha.yO (webviewer-core.min.js:2116:98)
    at ha.VV (webviewer-core.min.js:2115:334)
    at f.wi (webviewer-core.min.js:1977:308)
    at ha.wi (webviewer-core.min.js:2119:255)
    at Ya.qg (webviewer-core.min.js:414:52)
    at ha.VV (webviewer-core.min.js:2116:9)
    at f.wi (webviewer-core.min.js:1977:308)
    (anonymous) @ document-review.service.ts:192

I am initializing the webviewer only once and reusing the webInstance by storing it in a variable webViewerInstance.

NOTE:
Previously i was using the webviewer 8.1.0v and same code was working fine with out any issues and now i have upgraded the webviewer to 10.8.0 version which is the latest version and i am getting error as explained above for the same code.

can you please help me this is a blocker?

Thanks,
Thousif

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello Thousif,

Are you hiding WebViewer when loading the document? You should not use “display:none” as this will cause issues. Instead, you can use “visibility: hidden”. Please take a look at the guide below for more info under Preload WebViewer.

Best Regards,
Darian

3

Hello Darian,

Thanks for the reply. Yes, I am hiding the webviewer and to hide the particular div of webviewer we are using the [hidden] tag in angular which internal does display: none. As suggested I tried to use visibility: hidden instead of display: none it works fine ,but using visibility: hidden it is impacting the our UI as visibility hidden is just hiding the element but in HTML it will be there and it is showing blank space for that.
Any other solution is possible to fix issue instead of visibility: hidden.

Thanks,
Thousif

4

Hello Thousif,

You can also use “height: 0; width: 0;” instead. Try using this with visibility: hidden.

Best Regard,
Darian

1 Like