Annotations (comments ex) causing JS error: won't render

Which product are you using?
PDFJS Express

PDF.js Express Version

UI version ‘8.4.1’
Core version ‘8.4.0’

Detailed description of issue
I can load a document into the viewer and am able to update fields and save them. On save, I export and save the annotations. When I reload the page, the fields are set properly. If I annotate the page with highlight and underlines, save, and reload, the annotations appear correctly.

However, if I add a comment annotation, save and reload, the annotations fail with the following JS error:

VM265:1 Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 18
at JSON.parse ()
at h.qO (webviewer-core.min.js:2575:263)
at ja (webviewer-core.min.js:2578:224)
at h.rO (webviewer-core.min.js:2578:462)
at webviewer-core.min.js:2570:364
at webviewer-core.min.js:2570:269
at webviewer-core.min.js:2076:313
at x (webviewer-core.min.js:1845:405)
at ha (webviewer-core.min.js:1845:426)
at ka (webviewer-core.min.js:2069:480)

Expected behaviour
All annotations will be displayed properly

Does your issue happen with every document, or just one?
Every document

Link to document

Code snippet

$(document).ready(function() {

    WebViewer({
        path: '/Scripts/pdf-js-express/lib',
        licenseKey: 'xxx', // redacted
        initialDoc: '/FormDocument/CreateFormTemplate/8',
        disableFlattenedAnnotations: true
    },
        document.getElementById('viewer')).then(async instance => {
            const docViewer = instance.docViewer;
            const annotManager = instance.annotManager;
            // call methods from instance, docViewer and annotManager as needed

            // you can also access major namespaces from the instance as follows:
            // const Tools = instance.Tools;
            // const Annotations = instance.Annotations;


            docViewer.addEventListener('documentLoaded',
                async () => {
                    $("#btnSave").click(function() {
                        saveFile(false, docViewer, annotManager);
                    });
                    $("#submitDocumentBtn").click(function() {
                        saveFile(true, docViewer, annotManager);
                    });

                    
                    var annotText = 'XXX'; // redacted full XFDF XML embedded string
                    await annotManager.importAnnotations(annotText);
                    
                });
    });
});

async function saveFile(isSubmit, docViewer, annotManager) {
    const xfdf = await annotManager.exportAnnotations();
    const fileData = await docViewer.getDocument().getFileData({});
    const blob = new Blob([fileData], { type: 'application/pdf' });

    var data = new FormData();

    data.append('xfdf', xfdf);
    data.append('file', blob);
    //data.append('license', 'XXXX'); // redacted

    // Process the file
    const response = await fetch('https://api.pdfjs.express/xfdf/merge', {
        method: 'post',
        body: data
    }).then(resp => resp.json());

    const { url, key, id } = response;

    // Download the file
    var mergedBlob = await fetch(url,
        {
            headers: {
                Authorization: key
            }
        }).then(resp => resp.blob());

    var data = new FormData();
    data.append("id", 8);
    data.append("pdfAnnotations", xfdf);
    data.append("fileStream", mergedBlob);

    $.ajax({
        url: '/FormDocument/UploadFile',
        method: "POST",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success : async data => {
            if (data.success) {
                if (isSubmit) {
                    return submitFormDocument();
                }
            }
        }
    });
}

async function submitFormDocument() {

    return $.ajax({
        url: "/FormDocument/Submit",
        type: "POST",
        data: {
            formDocumentId: "8"
        },
        success: function (data) {
            if (data.success) {
                var hasOpener = !isNullOrWhiteSpace(window.opener);

                if (hasOpener) {
                    window.close();
                }
                else {
                    var isPatient = true;
                    var isClinician = false;
                    var id = 29;
                    var url;

                    if (isPatient) {
                        url = "/Patient/Chart/29?patientPage=OtherDocuments";
                    } else if (isClinician) {
                        url = "/Clinician/Edit/29?page=Documents";
                    } else {
                        url = "/";
                    }

                    window.location.href=url;
                }
            } else {
                if (data.message != "") {
                    window.alert(data.message);
                } else {
                    window.alert("Something went wrong please try again");
                }
            }
        }
    });
}

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello chris1,

It seems you have your license key commented out

    const xfdf = await annotManager.exportAnnotations();
    const fileData = await docViewer.getDocument().getFileData({});
    const blob = new Blob([fileData], { type: 'application/pdf' });

    var data = new FormData();

    data.append('xfdf', xfdf);
    data.append('file', blob);
    //data.append('license', 'XXXX'); // redacted

    // Process the file
    const response = await fetch('https://api.pdfjs.express/xfdf/merge', {
        method: 'post',
        body: data
    }).then(resp => resp.json());

However the error that you noted is a JSON error, where is it failing in your code specifically? You have multiple fetch requests

Best regards,
Tyler Gordon
Web Development Support Engineer