Module not found: Error: Can't resolve 'fs' - Electron

Question

I am working on a PDF viewer, basically, it's a mozilla pdf.js project. I cloned the repo and installed the dependencies and everything works fine, even when I try to build the project through gulp generic, it works without any issue.

The problem started when I have installed electron, to create a desktop version of the viewer, everything still worked even in the electron app, but I have used const { ipcRenderer } = require('electron') to send messages to the main process, from the browser window. It works fine as well until I try to build the app using gulp generic, it throughs an error that says Module not found: Error: Can't resolve 'fs' in '/*******/pdf.js/node_modules/electron'. When I remove the require('electron') from the script it builds correctly.

My Code

function webViewerLoad() {
  const isElectron =
    navigator.userAgent.toLowerCase().indexOf(" electron/") > -1;
  if (isElectron) {
    const { ipcRenderer } = require("electron");
    ipcRenderer.send("electron:reload", v);
  }
}


  document.addEventListener("DOMContentLoaded", webViewerLoad, true);

The Error

Answer 1

If someone is stuck in the same situation, I have solved it in a few steps after quiet research.

First of all, I have been using electron.js on my client-side code and the I have been using const { ipcRenderer } = require("electron");. The browser doesn't know about require if you type in require in the browser console you'll get an error.

To surpass this issue, you have to use browserify or any similar tools. I have been using gulp.js, in my project.

Secondly, the file I have used require('electron') in, had multiple imports used import file from 'somefile.js', so that's why browserify wasn't bundling it. All I had to require electron in a separate .js file and bundle it.

ipc_electron.js

const ipcRenderer  = window.require('electron'). ipcRenderer;
//Clear the localstorage when application is quitted/closed
window.addEventListener("message", ({ data }) => {
  if (data.type === "electron:reload") {
    ipcRenderer.send("electron:reload");
  }
});

ipcRenderer.on("pdf:url", _ => localStorage.clear());

Gulp.js

gulp.task("browserify", () => {
  console.log();
  console.log("### Browserifying ipc_electron.js");
  return browserify("./web/ipc_electron.js", {
    debug: true,
    extensions: [".js"],
    ignoreMissing: true,
    detectGlobals: false,
    bare: true,
    debug: false,
    builtins: false,
    commondir: false,
  })
    .exclude("fs")
    .exclude("electron")
    .exclude("electron-updater")
    .exclude("electron-settings")
    .exclude("path")
    .exclude("url")
    .exclude("sqlite3")
    .exclude("express")
    .exclude("net")
    .exclude("body-parser")
    .bundle()
    .pipe(source("ipc_electron_bundle.js"))
    .pipe(gulp.dest("./web"));
});