How does `require` work in Electron?

Electron apps copy the Chromium process architecture. When you start an app with something like electron main.js, this starts the Chromium browser process. You pass it a Node.js module like main.js. Node.js uses the CommonJS system, so the initial module can require further modules. For example, this script will act much like a Node.js script:

const { readFileSync } = require('fs');
console.log(readFileSync('README.md').toString());

const {getValue, increment} = require('./counter.js');
increment();
console.log(getValue());

The additional power of Electron comes from require('electron'). This module provides an API for launching new Renderer processes by running things like:

const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
  const window = new BrowserWindow();
  window.loadFile('./index.html');
});

The Renderer processes act much like ordinary web pages. But you can allow them to use the Node.js module system, too! To do so, we pass:

const window = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true
  }
});

With nodeIntegration: true set, require becomes available to JavaScript in the context of that page, and we can write things like:

<!doctype html>
<html>
  <body>
    <h1>Renderer</h1>
    <script>
      const electron = require('electron');
      console.log(electron);
    </script>
  </body>
</html>

The Node.js module system is stateful. For example, we can have a counter.js module like:

let counter = 0;
exports.getValue = () => counter;
exports.increment = () => counter++;

In a typical Node.js app, this module would be loaded once, and the counter state would be shared globally. This is not the case in Electron. Each Renderer process is isolated, and its modules will have their own state. In other words, you can’t use modules for sneaky inter-process communication (we have other things for that).

The require('electron') module is a built-in, but we can require local modules in the file system too. As far as I can tell, Electron searches for modules in the same way Node.js does. But relative to what starting filepath?

If you use loadFile, modules seem to be resolved relative to the loaded file. For example, if you loadFile("foo/bar/baz.html"), then a call to require('some_module)' on that page will look for a module at foo/bar/baz/node_modules/some_module. But if you use loadURL with a non-file protocol, require('some_module') won’t search for modules on disk; it seems to only work for built-in modules like "electron" or "fs". This is a good thing (and you probably shouldn’t be using nodeIntegration with loadURL anyway!).

Even though we can use require to load our dependencies in Renderer processes, I’m not sure we should. I feel like it’s better to stick to the standard ways to load dependencies in a browser, like <script> and import.

(Although using import in a Renderer process is probably another can of worms. It’s ambiguous: does it use the browser’s module resolution, or that from Node.js? Another post for another time.)

Tagged #programming, #electron, #javascript.

More by Jim

What does the dot do in JavaScript?

foo.bar, foo.bar(), or foo.bar = baz - what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01

Smear phishing: a new Android vulnerability

Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06

A probabilistic pub quiz for nerds

A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26

Time is running out to catch COVID-19

Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14

The inception bar: a new phishing method

A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27

The hacker hype cycle

I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23

Project C-43: the lost origins of asymmetric crypto

Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16

How Hacker News stays interesting

Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26

My parents are Flat-Earthers

For decades, my parents have been working up to Flat-Earther beliefs. From Egyptology to Jehovah’s Witnesses to theories that human built the Moon billions of years in the future. Surprisingly, it doesn’t affect their successful lives very much. For me, it’s a fun family pastime. 2019-01-20

The dots do matter: how to scam a Gmail user

Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07

The sorry state of OpenSSL usability

OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02

I hate telephones

I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08

The Three Ts of Time, Thought and Typing: measuring cost on the web

Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26

Granddad died today

Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19

How do I call a program in C, setting up standard pipes?

A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17

Your syntax highlighter is wrong

Syntax highlighters make value judgments about code. Most highlighters judge that comments are cruft, and try to hide them. Most diff viewers judge that code deletions are bad. 2014-05-11

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.

How does require work in Electron?

Similar posts

More by Jim

How does `require` work in Electron?