Show/hide PDF pages throws Cannot read properties of null (reading 'sendWithPromise')

[foondadom]

I have to render PDF documents that can be 100+ pages long.

Previously I was loading the PDF as base64, but this is proving very memory intensive.

With the base64 source, this code worked:

    <div class="pdf-page-wrapper full-height" v-intersection="showOrHide" :data-index="index" :style="`width: ${zoomFactor === 0.6 ? '100%' : pdfPageWidth}`">
      <VuePDF :pdf="pdf" :fitParent="zoomFactor === 0.6" :page="page" :scale="zoomFactor"
              v-if="visibleItems[index] === true"></VuePDF>
    </div>
  </div>

showOrHide function:

const showOrHide = (entry: IntersectionObserverEntry): boolean => {
  if (entry.isIntersecting) {
    let indexVisible = entry.target.attributes['data-index'].value;
    visibleItems.value[indexVisible] = true;
  } else if (!entry.isIntersecting) {
    let indexVisible = entry.target.attributes['data-index'].value;
    visibleItems.value[indexVisible] = false;
  }
  return true
}

As you can see I'm using intersection observer (v-intersection) to determine if a page is "in view", then rendering it via a v-if. The opposite happens when the page scrolls out of view. I keep the page "space" (pdf-page-wrapper CSS class) once set to invisible so that the pages don't jump:

.pdf-page-wrapper { aspect-ratio: 380 / 537; }

As mentioned, with base64, this method worked well. However with a local file I am getting no visibility of the 3rd page onwards and the error in Android console is

Cannot read properties of null (reading 'sendWithPromise')

Looking at the source code, it seems the worker.messageHandler is null for the pages that are rendered on demand.

Questions:

1. Is this the best way to approach multi-page documents?
2. Can I get the v-if to work with a local PDF file?

Details:

1. vue-pdf version 1.11.1
2. Running in Capacitor Android
3. Vue 3 with Quasar

Thanks!

[TaTo30]

In recent versions the component will destroy the worker if is hidden/unmounted by v-if, try using v-show instead.

https://github.com/TaTo30/vue-pdf/blob/86a0a6914a4567d372cd5c4457118f25fe185796/packages/vue-pdf/src/components/VuePDF.vue#L282-L285

[foondadom]

Thanks so much, will give it a go!

[TaTo30]

I going to close this issue, feel free to reopen if the it persists