0

I am trying to integrate PSPDFKit (standalone) with a VueJS project, but struggling with some unexpected behaviour.

For background: I have a component which includes the import PSPDFKit from 'pspdfkit' statement. When I run the Vue application and navigate to the view that utilises this component, I get an Uncaught SyntaxError: Unexpected token '<' - suggesting that I'm encountering HTML instead of the intended library.

However, when running locally, if I comment out the import line, wait for the PSPDFKit is not defined errors, then un-comment the import line, the viewer loads as expected.

Can anyone shed any light on what's happening here? I'm struggling to diagnose the issue and ensure the integration works as expected on first load. Component code is below.

Thanks

<template>
    <div class="container"></div>
</template>

<script>
import PSPDFKit from 'pspdfkit'

export default {
    name: 'PSPDFKitWrapper',
    props: ["documentUrl", "licenseKey", "baseUrl"],
    _instance: null,

    mounted: function ()
    {
        this.load();
    },

    methods: {
        load()
        {
            PSPDFKit.load({
                document: this.documentUrl,
                container: ".container",
                licenseKey: this.licenseKey,
                baseUrl: this.baseUrl
            })
                .then(instance =>
                {
                    this._instance = instance;
                    this.$emit("update:error", "");
                })
                .catch(err =>
                {
                    PSPDFKit.unload(".container");
                    this.$emit("update:error", err.message);
                });
        },
        unload()
        {
            if (this._instance) {
                PSPDFKit.unload(this._instance);
                this._instance = null;
            } else {
                PSPDFKit.unload(".container");
            }
        }
    }

}
</script>

<style scoped>
.container {
    width: 100%;
    height: 90vh;
}
</style>
Nick M
  • 51
  • 6
  • I understand you're adapting the public Vue integration example from PSPDFKit, correct?: https://github.com/PSPDFKit/pspdfkit-web-example-vue Can you confirm that the barebones example works for you? Otherwise, what's the change introduced by you that makes it fail? You can also ask us directly in PSPDFKit support platform, we can help you with integration issues: https://support.pspdfkit.com/hc/en-us/requests/new – Miguel Calderón Apr 28 '21 at 08:06
  • Hi Miguel, I did manage to work around this by importing the library within `index.html`, like in the bare bones example. However, in order to actually use the class I had to use `// eslint-disable-next-line` statements above any `load` or `unload` calls. – Nick M Apr 29 '21 at 09:05

0 Answers0