# Pdf js viewer throwing error on Firefox

**URL:** <https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429>\
**Category:** Technical Support\
**Created:** [December 29, 2020, 12:00pm UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429 "2020-12-29T12:00:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [December 29, 2020, 12:00pm UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/1 "2020-12-29T12:00:56Z")

</div>

**PDF.js Express Version**

**Detailed description of issue**  
Hi ,  
On loading the viewer on firefox we are getting an error msg on loading

**Expected behaviour**  
Pls find attached screenshot

 ![Screenshot from 2020-12-29 17-25-57](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/79db0def997ac3e4791df78c13b7f41bddc77008.png) ![Screenshot from 2020-12-29 17-26-13](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/e7318957740b36eaf505716f6baf2b4274eddfb4.png)

**Does your issue happen with every document, or just one?**  
Happens with every pdf. I am using this version of pdfjs : ^7.0.1  
“@pdftron/pdfjs-express”: “^7.0.1”,  
“@pdftron/pdfjs-express-utils”: “^1.2.3”,

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
wvDocumentLoadedHandler(): void {  
// you can access docViewer object for low-level APIs  
const docViewer = this.wvInstance;  
const annotManager = this.wvInstance.annotManager;  
//and access classes defined in the WebViewer iframe  
const { Annotations } = this.wvInstance;  
this.wvInstance.closeElements([‘loadingModal’]);  
}  
getDataById(info, id, index) {  
this.selectIndex = index;  
this.pdf\_url = info  
this.fileId = id  
this.wvInstance.openElements([‘loadingModal’]);  
// here info is the S3 url of pdf  
this.wvInstance.docViewer.loadDocument(info)

}

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 4, 2021, 4:59pm UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/2 "2021-01-04T16:59:33Z")

</div>

Hey there!

This looks like it would be an issue with your code and not PDF.js Express.

Could you provide some code showing how you are loading Express and where `this.wvInstance` is getting set?

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [January 5, 2021, 11:38am UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/3 "2021-01-05T11:38:15Z")

</div>

Thanks Logan !

Please find the attached code to load the Webviewer instance.

```javascript
wvInstance;
  ngOnInit() {
    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
  
    this.detailsStepService.hasSubmittalId.subscribe(res => {
      this.submittalId = res;
    });
  }

  wvDocumentLoadedHandler(): void {
    const docViewer = this.wvInstance;
    const annotManager = this.wvInstance.annotManager;
    const { Annotations } = this.wvInstance;
    this.wvInstance.closeElements(['loadingModal']);
  }
  getDataById(info, id, index, instance?:any) {
    console.log('instance 2', instance);
    this.wvInstance = instance;
    this.selectIndex = index;
    console.log(info)
    this.pdf_url = info
    this.fileId = id
    console.log(this.fileId)
    this.wvInstance.openElements(['loadingModal']);
    this.wvInstance.docViewer.loadDocument(info)
    if (this.files.length > 1 && index != 0) {
      console.log('files greater than 1');
      this.sendForOCr();
    }
  }
  async ngAfterViewInit(): Promise<void> {
    WebViewer({
      licenseKey: 'u4Utg1NNWOrQZIX32Rxu',
      disableFlattenedAnnotations: true,
      path: '../../wv-resources/lib',
      config: '../../wv-resources/lib/ui/config/file.js', // relative to your HTML file
      disabledElements: [
        'selectToolButton', 'toolbarGroup-Edit', 'toolsHeader', 'searchButton', 'header',
        'panToolButton', 'toggleNotesButton', 'notesPanel', 'menuButton', 'highlightToolGroupButton', 'underlineToolGroupButton', 'strikeoutToolGroupButton', 'stickyToolGroupButton', 'freeHandToolGroupButton',
        'toolsOverlay', 'viewControlsButton', 'leftPanelButton', 'toolbarGroup-Insert', 'toolbarGroup-Shapes', 'squigglyToolGroupButton', 'freeTextToolGroupButton',
      ],
     
    }, this.viewer.nativeElement).then(instance => {
      console.log('instance 1', instance);
      this.wvInstance = instance;
    
      const tempSubmittalId = this.route.snapshot.queryParams['submittal'];
      if (tempSubmittalId) {
        this.submittalId = tempSubmittalId;
        this.detailsStepService.changeSubmittalId(tempSubmittalId);
        this.initiatePDFeditor(instance);
      }

      const utils = new ExpressUtils({
        serverKey: '49EzA6YczS1pfUG7ZYZy',
        clientKey: '0U7UA9kWPkFSfX3iQNB5'
      })

      const { Annotations, Tools, annotManager, docViewer } = instance;
      // set pdf to full width of viewer
      instance.setFitMode(instance.FitMode.FitWidth);
)}
}

  initiatePDFeditor(instance?:any) {
    this.fileUploadService.getDataById(this.submittalId).subscribe(res => {
      this.files = res;

      for (let file of this.files) {
        file["active"] = false;
      }

      if (this.files.length > 0) {
        this.getDataById(this.files[0].file_info, this.files[0].id, 0, instance);
      }
    }, err => {
      const error = err.error || 'Server Error';
      this.openSnackBar(error);
    });
  }

```

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 5, 2021, 5:11pm UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/4 "2021-01-05T17:11:53Z")

</div>

Hey there!

Are you by chance setting `display: none` to the viewer element? Firefox has a weird bug where setting display: none makes iframe’s behave weirdly, which breaks the viewer.

---

<div class="post-metadata">

**Author:** ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)\
**Post date:** [January 6, 2021, 5:38am UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/5 "2021-01-06T05:38:43Z")

</div>

Hey Logan ,  
No we are not using setting display :none to it. Its weird because the viewer gets loaded if we refresh the browser but does not load the first time.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 6, 2021, 7:30pm UTC](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/6 "2021-01-06T19:30:45Z")

</div>

Hi,

It sounds like its probably some kind of timing issue, possibly caused by how/when you are loading WebViewer.

I would suggest adding some logs and breakpoints throughout your code to check for timing issues. Make sure that WebViewer is finished loading before trying to use this.wvInstance.

Also, if you are using some kind of Tab or Navigation library, it may be setting elements to display:none without you directly knowing it. You could make sure this is not the case either.

I do not believe this issue is being caused directly by PDF.js Express.

Let me know your findings!

Thanks,  
Logan