Cannot use pdfjs with the Options API in Vue 3

[EricG-Personal]

Consider this simple test case which replicates the situation found in the pdfjs code...

With Options API

This will emit the error:

TypeError: Cannot read private member #hi from an object whose class did not declare it

Look at how #pagePromises is defined and used in the WorkerTransport class. The situation is the same. When asking for a page from the pdf document, the same error as above will be emitted.

I am not sure anything can be done about this, but wanted to report the issue in case this points to a larger problem with the design which may popup in other situations outside of the Options API and Vue 3.

I believe the overall issue is that if the pdf instance returned from resolving the getDocument().promise is wrapped in a Javascript Proxy, then the private member #pagePromises cannot be accessed by the WorkerTransport object when asking for a page via getPage(). It is this general problem which may need to be looked at, if it is one.

Note, that if I use the Composition API of Vue, the equivalent code works just fine because there is no proxy involved.

with Composition API

[EricG-Personal]

I asked on reddit about this situation in the following conversation...

https://www.reddit.com/r/vuejs/comments/1825uea/want_to_understand_behavior_in_the_options_api/

and there were some interesting responses.

There is a bug with pdfjs. The way pdfjs is written is not compatible with javascript proxies. Using the Vue 3 Options API is just one of many situations where a javascript proxy might be used to wrap these objects.

There is a solution as outlined in the conversation.

You have to force bind all the public methods of the object to its own instance before wrapping the object in a proxy

Playground