Browser zoom issue: pdfRender.cancel() is undefined

[stofi]

Hi, I have discovered a weird bug that seems to be related to the zoom level of my browser. pdfjsWrapper.js throws a TypeError if I try to mount the pdf component unless the i have the zoom set at the default 100% (or at 50% on an HDPI enabled)

My browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Edit: I created a repository and reproduced this on my laptop with Safari and Chrome, with the same behavior. https://github.com/stofi/vue-pdf-resize-issue

TypeError: pdfRender.cancel() is undefined
    renderPage pdfjsWrapper.js:196
    resize componentFactory.js:76
    VueJS 4
    method backend.js:3552
    handler resize-sensor.vue:49
    VueJS 11
    update resize-sensor.vue:39
    VueJS 33
client.js:103

Uncaught (in promise) TypeError: this.messageHandler is null
    getAnnotations pdf.js:14354
    getAnnotations pdf.js:12869
    pendingOperation pdfjsWrapper.js:236
    promise callback*PDFJSWrapper/this.renderPage pdfjsWrapper.js:233
    pdfRenderOperation pdfjsWrapper.js:263
    promise callback*PDFJSWrapper/this.renderPage/pendingOperation< pdfjsWrapper.js:257
    promise callback*PDFJSWrapper/this.renderPage pdfjsWrapper.js:233
    resize componentFactory.js:76
    VueJS 4
    method backend.js:3552
    handler resize-sensor.vue:49
    VueJS 5
pdf.js:14354

[stofi]

I have taken a look at the source, to see if I can figure out what causes the issue.

But I don't really understand the intention behind this piece of code:

https://github.com/FranckFreiburger/vue-pdf/blob/1a47de972abefd2079a4e23485041f08d9f68aab/src/pdfjsWrapper.js#L190-L200

Doesn't this always return from the renderPage function unless pdfRender === null?

[xeno]

@stofi Did you end up finding a resolution to this? I'm looking for one, as well. If I find anything, I'll share.

[stofi]

@xeno my resolution was to wrap vue-pdf in a wrapper component with errorCaptured hook, to prevent nuxt rerouting to an error page. The pdf seems to render fine despite this error.

<script>
import pdf from 'vue-pdf'

export default {
  name: 'PdfViewer',
  components: {
    pdf,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
  },
  errorCaptured() {
    return false
  },
}
</script>

[windsongdv]

A different solution, found in Issue #334

In package.json, instead of vue-pdf ^4.3.0 use "vue-pdf": "4.2.0",

I also had to add "pdfjs-dist": "2.5.207", to compile.

Credit for this solution goes to the poster in #334

[CloudMunk]

A different solution, found in Issue #334

In package.json, instead of vue-pdf ^4.3.0 use "vue-pdf": "4.2.0",

I also had to add "pdfjs-dist": "2.5.207", to compile.

Credit for this solution goes to the poster in #334

That did not work for me and just caused other problems.

[sohib-code]

and i have a same question In package.json, instead of vue-pdf ^4.3.0 use "vue-pdf": "4.2.0",

I also had to add "pdfjs-dist": "2.5.207", to compile. but this version do not working