Build viewer not working

[nishanprime]

Requirement:

Add new button called "Save"
When clicked on it, trigger pdf buffer sending to my server to store in s3

Added custom button on viewer.html:

<button
id="customsave"
title="Save Document"
tabindex="33"
data-l10n-id="custom_save"

Save

Added it to getViewerConfiguration in app.js
saveDocument: document.getElementById("customsave"),

then passed it to eventbus._on on both bind and unbind function in the PDFViewerApplciation class in app.js:

eventBus._on("customsave", webCallWebHookWithPdf);

function webCallWebHookWithPdf() {
PDFViewerApplication.callWebHookWithPdf();
}

async callWebHookWithPdf(options = {}) {
if (this._saveInProgress) {
return;
}
this._saveInProgress = true;
await this.pdfScriptingManager.dispatchWillSave();

const url = this._downloadUrl,
filename = this._docFilename;
const key = url.split("/api/files/")[1];
try {
this._ensureDownloadComplete();

const data = await this.pdfDocument.saveDocument();
const blob = new Blob([data], { type: "application/pdf" });
const formData = new FormData();
formData.append("file", blob, filename);
formData.append("key", key);

const url = "http://localhost:8888/api/webhook/update-file";
const response = await fetch(url, {
method: "POST",
body: formData,
});
console.log(response);
if (response.status === 200) {
// detailed response
const detailedMessage = await response.json();
console.log(detailedMessage);
window.alert(detailedMessage?.fetchResult?.message || "File updated");
window.location.reload();

} else {
const { data, message, status } = await response.json();
window.alert(message);
}

// await this.downloadManager.download(blob, url, filename, options);
} catch (reason) {
// When the PDF document isn't ready, or the PDF file is still
// downloading, simply fallback to a "regular" download.
console.error(Error when saving the document: ${reason.message});
// await this.download(options);
} finally {
console.log("I am in finally block");
await this.pdfScriptingManager.dispatchDidSave();
console.log("Now here");
this._saveInProgress = false;
}

if (this._hasAnnotationEditors) {
this.externalServices.reportTelemetry({
type: "editing",
data: {
type: "save",
stats: this.pdfDocument?.annotationStorage.editorStats,
},
});
}
},

and then I am sending it to server (gulp server) and then making request to my server to upload it to s3.

It is workin all fine when I am in development server (npx gulp server). I tested and it is working all good. When I build it:

npx gulp generic

and then tried viewing viewer.html it is not working. In console.log it said that it could not access viewer.js (and possibly other js files) that are all mjs now. I tried serving it via express server as well but it did not work.

How do I make sure to run in build server?

(My main goal is to have a pdf renderer, that gives you most up to date pdf buffer. I mean you are editing form fields and hit on save then it should return pdf with that filed filled. Just like other PDF SDKs in the market. I made it work with pdjs by adding some stuffs mentioned above, i feel like it should be much easier than this. If yes, please help me. If not, please guide me how to make gulp generic work.

This is the github repo: https://github.com/nishanprime/PDFJS_MANAUL

To replicate:

clone it
npm i and make sure to have gulp installed as well
do "npx gulp server" then server should start, try visiting: localhost:8888/web/viewer.html. (it should load a default pdf. When clicked on save, it should not do anything as there is no server setup on your end but at least default pdf should be visible)

now do: npx gulp generic

and inside of build/generic/web, open viewer.html, it is not showing anything

try serving it with any server (i tried both HTTP and node express as static file), and it did not work. Just showed black blank viewer screen with no pdf.