esm

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ESM in Electron main process uses Node.js loader

Electron's main process runs in a Node.js context and uses Node.js's ESM loader. To enable ESM in a file in the main process, the file must end with the .mjs extension or the nearest parent package.json must have "type": "module" set.

ESM in sandboxed renderer uses Chromium loader

Sandboxed renderer processes use Chromium's ESM loader. Sandboxed preload scripts are run as plain JavaScript without an ESM context and cannot use ESM imports. External modules must be loaded via a bundler, and the electron API is loaded via require('electron').

ESM in unsandboxed renderer uses Chromium loader

Unsandboxed renderer processes use Chromium's ESM loader. Unsandboxed preload scripts can use the Node.js ESM loader when available, depending on the contextIsolation setting.

ESM renderer processes cannot access Node.js modules or npm packages

Renderer processes run in a Chromium context and import statements will not have access to Node.js built-in modules and will not be able to load npm packages from node_modules. To load JavaScript packages via npm into the renderer process, use a bundler such as webpack or Vite to compile code for client-side consumption.

ESM main process must use await before ready event

ES Modules are loaded asynchronously in the main process. Only side effects from the main process entry point's imports execute before the ready event. Certain Electron APIs like app.setPath must be called before the ready event is emitted. Use top-level await to ensure every Promise needed before the ready event is awaited, or the app may be ready before that code executes. This is particularly important for dynamic ESM import statements; static imports are unaffected.

ESM preload scripts must have .mjs extension

Preload scripts will ignore "type": "module" fields in package.json. To use ESM in preload scripts, the file must use the .mjs file extension.

Unsandboxed ESM preload scripts may run after page load

If the response body for a renderer's loaded page is completely empty (Content-Length: 0), its ESM preload script will not block the page load, which may result in race conditions. To fix this, either add content to the response body (e.g. an empty html tag like <html></html>) or swap back to using a CommonJS preload script (.js or .cjs), which will block the page load.

Dynamic ESM imports in preload require context isolation

If an unsandboxed renderer process does not have the contextIsolation flag enabled, dynamic import() calls cannot load files via Node's ESM loader. Chromium's dynamic ESM import() function usually takes precedence in the renderer process, and without context isolation, there is no way of knowing if Node.js is available. If context isolation is enabled, import() statements from the renderer's isolated preload context can be routed to the Node.js module loader.

ESM support added in electron@28.0.0

ES Module (ESM) support in Electron was added in electron@28.0.0.

ESM support matrix for Electron processes

The following table documents ESM support across Electron processes: Main process uses Node.js ESM loader with no preload support; Sandboxed renderer uses Chromium ESM loader with unsupported preload; Unsandboxed & Context Isolated renderer uses Chromium loader with Node.js preload; Unsandboxed & Non Context Isolated renderer uses Chromium loader with Node.js preload.

Transpiler warning for ESM to CommonJS translation

JavaScript transpilers like Babel and TypeScript historically converted ES Module syntax to CommonJS require calls before Node.js supported ESM natively. For example, @babel/plugin-transform-modules-commonjs transforms ESM imports to require calls based on the importInterop setting. These CommonJS calls load module code synchronously. When migrating transpiled CommonJS code to native ESM, be careful about the timing differences between CommonJS and ESM loading.

ESM imports supported in Electron 28+

ECMAScript modules (using 'import' to load modules) are supported in Electron as of Electron 28. For TypeScript, you can import main process modules from 'electron/main' for better type checking.

Give your agent this brain