TypeError: attempted to get private field on non-instance

Get Help
#1

After upgrading an external library, pdfjs-dist the following error occurs:
Uncaught TypeError TypeError: attempted to get private field on non-instance
at _classExtractFieldDescriptor (…\node_modules@babel\runtime\helpers\classExtractFieldDescriptor.js:3:11)
at _classPrivateFieldGet
(…\node_modules@babel\runtime\helpers\classPrivateFieldGet.js:6:20)
at getPage
(…\pdfjs-dist\build\pdf\src\display\api.js:2927:23)
at getPage
(…\pdfjs-dist\build\pdf\src\display\api.js:782:12)

Is this a Vue issue or something within the external library?

#2

The fact that it only occurred after you upgraded that pacakge and the error stems from pdfjs-dist is a good sign it’s that package and not Vue.

#3

I do not think this is a bug (in vue or pdfjs) but rather an incompatibility between vue and pdfjs. What I am trying to understand is what is the underlying cause and how to work around it. It seems to be something to do with calling a method or accessing a property on a proxy object.

#4

What I find most likely is that they in the version of pdfjs-dist changed how you should use the library, and you get the error because you still use the library in the old way you should use it before, but that now no longer works.

See the release notes/documentation for pdfjs-dist from the version you used before to the version you use now to figure out if they have deprecated/changed how the library should be used. And if they have, then you need to change your own code that makes use of the library accordingly.

#5

I’m seeing this issue too. But different from @clinsted, it happened when I upgraded from Vue 2 to Vue 3 and used exactly the same version of pdfjs-dist.

Is there a way to pass a prop without Vue wrapping it in a proxy?

#6

Calling unref didn’t help:

    await unref(props.pdfDoc).getPage(props.pageNumber);

Console:

vue.js?d1ef:15 TypeError: attempted to get private field on non-instance
    at _classExtractFieldDescriptor (util.js?38cd:16:1)
    at _classPrivateFieldGet (util.js?38cd:16:1)
    at Proxy.getPage (util.js?38cd:16:1)
    at Proxy.getPage (util.js?38cd:16:1)
    at renderPage (SinglePage.vue?21fa:59:1)
    at visibleChanged (SinglePage.vue?21fa:140:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:157:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:166:1)
    at job (runtime-core.esm-bundler.js?d2dd:1794:1)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?d2dd:320:1)
#7

I found a work around: call toRaw(doc) or toRaw(page) before calling any methods on the pdfjslib document or page.