Patcher on client side?

[rcheetah]

In the docs, the Patcher will always be used on the server side.

Is it possible though, to use it on the client side? I tried this:

fetch('./public/template.docx')
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to fetch template.docx');
    }
    return response.blob();
  })
  .then(blob => {
    console.dir(blob);
    const reader = new FileReader();
    reader.onload = function(event) {
        const arrayBufferData = event.target.result;
        console.log(arrayBufferData);

        patchDocument({
            outputType: "blob",
            data: arrayBufferData,
            patches: {
                title: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("NEUER TITEL")],
                },
                number: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("XX")],
                }
            },
        });

    };

    reader.readAsArrayBuffer(blob);
  })
  .catch(error => {
    console.error('Error fetching template.docx:', error);
  });

But I get an error:
docx.js?v=eb500196:16887 Uncaught (in promise) Error: Can't read the data of 'the loaded zip file'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?
at docx.js?v=eb500196:16887:43

But the data is actually an ArrayBuffer if I console.log it. I also tried inputing the blob, with the same result. So I thought maybe it will only work with fs.readFileSync. I’m not experienced with node, and I don't know what object type this will return. But I would've guessed it’s a ArrayBuffer too!?

Am I doing something wrong, or is the Patcher not supported on the client side?

[rcheetah]

I finally found the problem with the code above. While the syntax above matches the one in the documentation, it only seems to work with this syntax:

fetch('./public/template.docx')
.then(response => {
    if (!response.ok) {
        throw new Error('Failed to fetch template.docx');
    }
    return response.blob();
})
.then(blob => {
    console.dir(blob);
    const reader = new FileReader();
    reader.onload = function (event) {
        const arrayBufferData = event.target.result;
        console.log(arrayBufferData);

        patchDocument(arrayBufferData, {
            outputType: "nodebuffer",
            patches: {
                title: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("NEUER TITEL")],
                },
                number: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("XX")],
                }
            },
        }).then(finaldata => {
            const blob = new Blob([finaldata], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
            // Now work with the data, e.g. download it.
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'output.docx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        });

    };

    reader.readAsArrayBuffer(blob);
})
.catch(error => {
    console.error('Error fetching template.docx:', error);
});

The difference here is that the data is given as the first argument, and the rest of the options are given within the object. Using the data field in the options object doesn't work on the client side. I'm not sure whether this is a bug or if I missed an obvious detail.
Should I open a ticket for this, or is it just a mistake on my end?

Also I used "nodebuffer" as the outputType and then converted it into a Blob Object afterwards