TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined

[jollemannen]

TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined

Hi! Im trying to run pdfvuer in my nuxt app but it fails because of the below error. The wierd thing is that the pdf gets rendered if i set the page to page 2.

The error occurs in pdfvuer.umd.js on line 23029 aka the line below
this.pdfViewer.annotationLayer = this.pdfViewer.annotationLayerFactory.createAnnotationLayerBuilder(this.pdfViewer.div, this.pdfViewer.pdfPage);

Can you guys help me with this?

Here is my page where i included pdfvuer:

`

{{data.Name | capitalize({ onlyFirstLetter: true }) }}

Din sökfras finns på sidan {{ item.pageNumber }}

Inga sökresultat

Läser in fil. Detta kan ta en stund

          </pdf>
        </client-only>

        <div class="mt-5 p-3" v-if="page != null && pageCount != null && pageCount > 1">
          <div class="d-none d-sm-block">
            <div class="input-group">
              <button class="btn btn-teoark rounded-0" v-on:click="changePage(page - 1)" :disabled="page == 1">Gå till
                föregående sida
              </button>
              <b-form-select v-model="page" v-on:change="onPageChangeScrollTop" class="rounded-0">
                <option selected :value="1">Välj sida</option>
                <option v-for="(item, index) in options" v-bind:value="item.value">
                  {{ item.text }}
                </option>
              </b-form-select>
              <button class="btn btn-teoark rounded-0" v-on:click="changePage(page + 1)"
                      :disabled="page == pageCount">Gå till nästa sida
              </button>
            </div>
          </div>
          <div class="row mb-3 d-block d-sm-none">
            <div class="col-12">
              <button class="btn btn-teoark rounded-0 w-100" v-on:click="changePage(page - 1)" :disabled="page == 1">
                Gå till föregående sida
              </button>
            </div>
            <div class="col-12">
              <b-form-select v-model="page" v-on:change="onPageChangeScrollTop" class="w-100 rounded-0">
                <option selected :value="1">Välj sida</option>
                <option v-for="(item, index) in options" v-bind:value="item.value">
                  {{ item.text }}
                </option>
              </b-form-select>
            </div>
            <div class="col-12">
              <button class="btn btn-teoark rounded-0 w-100" v-on:click="changePage(page + 1)"
                      :disabled="page == pageCount">Gå till nästa sida
              </button>
            </div>
          </div>
        </div>
        <div class="mb-5 p-3">
          <p>Visar sida {{ page }} av {{ pageCount }}</p>
        </div>


        <div class="p-1"></div>
      </div>
    </b-overlay>
  </div>
</div>

<script> import pdfvuer from 'pdfvuer' import 'pdfjs-dist/build/pdf.worker.entry' import axios from 'axios' import axiosRetry from 'axios-retry'; axios.defaults.withCredentials = true axiosRetry(axios, { retryDelay: (retryCount) => { return retryCount * 1000; } }); export default { watch: { progress: function () { console.log(this.progress) }, pageCount: function () { if (typeof this.pageCount != "undefined" && this.pageCount != null) { var array = Array.from(new Array(this.pageCount), (x, i) => i); var pagesArray = array.map(value => { return {"value": value + 1, "text": "Sida " + (value + 1)} }) this.options = pagesArray } } }, methods: { pdfError(value) { console.log(value) }, changePage(value) { this.page = value window.scrollTo({top: 0}); }, onPageChangeScrollTop() { window.scrollTo({top: 0}); } }, async asyncData({params, redirect, $sentry, $storage}) { const token = $storage.getUniversal("token") return await Promise.all([ axios.get(`https://myapiurl/` + params.id + (typeof token != "undefined" && token != null ? '?token=' + token : '')), axios.get(`https://myapiurl/` + params.id + (typeof token != "undefined" && token != null ? '?token=' + token : '')) ]).then(([response, pages]) => { if (response.data.Id) { var Id = response.data.Id.toString(); } var data = response.data; var fileName = response.data.FileName; if (typeof fileName != "undefined") { return { loading: true, scale: 'page-width', showSearchResults: false, searchString: '', options: null, progress: null, pageCount: 0, page: 1, pdfdata: undefined, pages: pages.data, data: response.data, file: 'https://mycdnurl/' + params.id + '/' + fileName } } }) .catch((err) => { if (typeof err != 'undefined' && typeof err.response != 'undefined' && typeof err.response.status != 'undefined') { if (err.response.status == 403) { redirect('/Error/notloggedin') return false; } if (err.response.status == "404") { return { searchString: '', options: null, progress: null, pageCount: 0, page: 1, pages: null, pdfdata: undefined, data: response.data, file: 'https://mycdnurl' + params.id + '/' + fileName } } } }) }, mounted: async function () { if (process.browser) { this.pdfdata = pdfvuer.createLoadingTask({ url: this.file }); this.pdfdata.then(pdf => { var url = window.location.href; var page = url.split('=')[1]; if (typeof page !== 'undefined') { this.page = parseInt(page); } else { this.page = 1; } this.loading = false; this.pageCount = pdf.numPages; }) this.pdfdata.onProgress = (total) => { console.warn(total) } } }, components: { "pdf": pdfvuer } } </script> <style src="pdfvuer/dist/pdfvuer.css"></style>

`

[ramsane]

It happens when I miss this prop.
:annotation="true"
Try passing it.

Even I am trying to do the same in nuxt. I wasn't able to load it with src as .pdf file. Only advanced example is working. Simple example is not working. I use django as backend. with s3 in production environment. I don't need any customization as such. Just simply displaying the pdf would suffice. But I can't do it as this simple example woudn't work.

let me know if you could do it successfully.

[jollemannen]

@ramsane Thanks for the suggestion it worked when i set it to true but its weird that this issue happens at all.

Is there a more permanent solution since i have annotations in our pdf library that we dont want to be seen.

Regards Joel

[ramsane]

I don't know. I was new to this. I am trying to make it work. Is there any way to render page on demand ? I don't wish to render all the pages without scrolling. It makes the page unnecessarily heavy.

[RobertJGabriel]

Also bump

[arkokoley]

@ramsane, by default pdfvuer renders one page at a time. You can set the page prop on the component and render only one page at a time.

[jollemannen]

@arkokoley Is there any solution to the above problem without setting :annotations="true"?

[arkokoley]

@jollemannen ideally this issue should never have happened.. I'm working on a fix for this. I'll push it out in a day or two.

[RobertJGabriel]

Thank you for your work @arkokoley

Do you have Github sponsor account?

[okosodovictor]

Thank you @arkokoley. I am having the same issue. It just started yesterday and here is my error message bellow.

TypeError: Cannot read property 'createAnnotationLayerBuilder' of undefined
at a.drawScaled (pdfvuer.umd.js:23034)
at a.scale (pdfvuer.umd.js:22919)
at nt (vue.runtime.esm.js:1863)
at rn.run (vue.runtime.esm.js:4584)
at $r (vue.runtime.esm.js:4326)
at Array. (vue.runtime.esm.js:1989)
at ut (vue.runtime.esm.js:1915)
ot @ vue.runtime.esm.js:1897

"pdfjs-dist": "2.5.207",
"pdfvuer": "^1.7.5",

I tried to set annotation to true. still have the issue.


loading content here...

Many thanks in advance

[arkokoley]

Fixed as part of v1.9.1