Add browser polyfills/shims for more node globals

[itsMapleLeaf]

Historically, Remix has had issues with importing files that use node APIs, hence the .server prefix. This issue also applied in the case of remix-electron, and I recommended the same solution.

With the 1.2 update and its addition of polyfilled node globals, I went to see if this allowed importing electron directly, but nah. In the browser I still get Uncaught ReferenceError: __dirname is not defined. Even through some tricks to add that global, I still get fs.existsSync is not a function.

Here's the bundled electron module that's trying to run in the browser.

// ../node_modules/.pnpm/[email protected]/node_modules/electron/index.js
var require_electron = __commonJS({
  "../node_modules/.pnpm/[email protected]/node_modules/electron/index.js"(exports, module) {
    init_react();
    var fs = require_fs();
    var path = require_path();
    var pathFile = path.join(__dirname, "path.txt");
    function getElectronPath() {
      let executablePath;
      if (fs.existsSync(pathFile)) {
        executablePath = fs.readFileSync(pathFile, "utf-8");
      }
      if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
        return path.join(process.env.ELECTRON_OVERRIDE_DIST_PATH, executablePath || "electron");
      }
      if (executablePath) {
        return path.join(__dirname, "dist", executablePath);
      } else {
        throw new Error("Electron failed to install correctly, please delete node_modules/electron and try installing again");
      }
    }
    module.exports = getElectronPath();
  }
});

I think this means Remix's node shims aren't extensive enough, and that this issue could come up with other modules that use the same APIs. Maybe the node-globals plugin could be of use here?

I'd also like to know if there's some short-term way to proceed here. That electron.server.js proxy file has always irked me 😅

[merelinguist]

Some Node modules can be polyfilled for the browser, but the filesystem can't be. For security reasons, there's no real way to access files with web apis.

[itsMapleLeaf]

For sure, but I'm not really asking for a "real" polyfill, just a shim so that the code can run without errors. Maybe even a set of functions that throw when called