Webviewer Electron pdftron viewer desktop error

Technical Support WebViewer
,
1

WebViewer Version: 11.3

Do you have an issue with a specific file(s)?yes
Can you reproduce using one of our samples or online demos? no
Are you using the WebViewer server? yes
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? yes
Is your issue related to annotations?no

Please give a brief summary of your issue:
(Think of this as an email subject)
While creating the desktop version the viewer is not showing. while i copied all the sample code. sample code is working but the project what i created is not having that viewer. In the devtools the error coming as
Uncaught ReferenceError: require is not defined

  • at render.js:5:20*
    const { dialog } = require(“electron”).remote;
    const fs = require(“fs”);

const viewerElement = document.getElementById(“viewer”);

const openFileBtn = document.getElementById(“open”);
const saveFileBtn = document.getElementById(“save”);

WebViewer(
{
path: ‘
/public/lib/webviewer’, // Path to WebViewer lib folder
licenseKey:‘demo:17425483407ba70bbecd6084ef03160789’,
initialDoc: ‘
/public/files/CADMATE FIRE SERVICE-SPRINKLER.pdf’,
useWebComponent: false,
},viewerElement
).then((instance) => {
// Interact with APIs here.
// See Guides for JavaScript PDF Viewer Library | Apryse documentation for more info
instance.UI.setTheme(‘dark’);
instance.UI.disableElements([‘downloadButton’]);

const { documentViewer, annotationManager } = instance.Core;

openFileBtn.onclick = async () => {
  const file = await dialog.showOpenDialog({
    properties: ["openFile", "multiSelections"],
    filters: [
      { name: "Documents", extensions: ["pdf", "docx", "pptx", "xlsx"] },
      { name: "Images", extensions: ["png", "jpg"] },
    ],
  });

  if (!file.canceled) {
    instance.UI.loadDocument(file.filePaths[0]);
  }
};

saveFileBtn.onclick = async () => {
  const file = await dialog.showOpenDialog({
    title: "Select where you want to save the PDF",
    buttonLabel: "Save",
    filters: [
      {
        name: "PDF",
        extensions: ["pdf"],
      },
    ],
    properties: ["openDirectory"],
  });

  if (!file.canceled) {
    const doc = documentViewer.getDocument();
    const xfdfString = await annotationManager.exportAnnotations();
    const data = await doc.getFileData({
      // saves the document with annotations in it
      xfdfString,
    });
    const arr = new Uint8Array(data);

    fs.writeFile(
      `${file.filePaths[0].toString()}/annotated.pdf`,
      arr,
      function (err) {
        if (err) throw err;
        console.log("Saved!");
      }
    );
  }
};

});
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you are encountering an issue with the require function in an Electron application using WebViewer. The error Uncaught ReferenceError: require is not defined typically occurs when trying to use Node.js modules in a context where they are not available, such as the renderer process of Electron when it is not properly configured to allow Node.js integration.

Some things you can try:

  • Ensure that your Electron app is configured to allow Node.js integration in the renderer process. This can be done by setting nodeIntegration: true in the webPreferences of the BrowserWindow.

  • Check if the contextIsolation is set to false in your Electron configuration, as this setting can also affect the availability of Node.js modules in the renderer process.

  • Consider using preload scripts to expose only the necessary Node.js APIs to your renderer process for better security practices.

  • Verify that your Electron app and WebViewer paths are correctly set up and accessible.

  • Ensure that WebViewer is properly initialized and the paths to the library and documents are correct.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

while setting contextisolation false
still getting error
Cannot destructure property ‘dialog’ of ‘require(
).remote’ as it is undefined.

I copied the same code from the webviewer electron still getting these errors.

1 Like
4

Hello blessy,

I was not able to reproduce the issue using the steps you provided.

I’m using the latest electron sample (last update, 1 week ago) version 11.3.

I would advise you to download the latest sample, as your issue might have been fixed:

Let me know if that helps.

Best Regards,
Mickaël

1 Like