Trying Out ESM Support with Electron v28
To reach a broader audience, this article has been translated from Japanese.
You can find the original version here.
Introduction
#Electron v28.0.0 has been released with support for ESM (ECMA Script Modules).
Finally, ESM is now usable in Electron.
Electron's ESM Support Status
#The following page in the documentation describes how to handle this support.
ES Modules (ESM) in Electron | Electron
The ESM support matrix (screenshot) from the same page is shown here.
In summary, the situation is as follows:
- The Main process uses Node.js's ESM Loader
- The Renderer process uses Chromium's ESM Loader
- For Preload scripts:
- If the Renderer process is sandboxed, the ESM Loader is not supported
- If the Renderer process is not sandboxed, Node.js's ESM Loader is used (thus the
.mjsextension is necessary)
In Electron's Main process, unlike the synchronous module loading of traditional CommonJS, ES Module loading is asynchronous, so care must be taken as follows:
Calls to Electron API such as ESM's dynamic import or
app.setPathare not executed in the order they appear in the code. These need to be executed before the Electron app'sreadyevent, but since they are asynchronous, they might run after thereadyevent. Therefore, to maintain traditional behavior, these should be called with await.
Using top-level await with ESM makes it easy to implement await calls.
For preload scripts, if possible, Node.js's ESM Loader is used. In this case, the file extension must be .mjs. If you want to use Node.js or Electron features in preload scripts, this approach should be adopted. There are restrictions, such as not being able to use Node.js's dynamic import if Context Isolation is not enabled. See the section below for details.
For information about sandboxing the Renderer process, see the following article.
Making Your Application ESM Compatible
#Last year's article "Electron - Moving from WebView to BrowserView" covered updating a sample application to Electron v28.0.0 for ESM compatibility. This application was straightforward to update, involving only the package.json and Main process, as it was already sandboxed and had Context Isolation enabled.
package.json
#- Added the line
"type": "module"
Main Process
#- Changed file extensions to
.mjs - Changed
requiretoimport - Modified places using
__filename,__dirnameto get from the url package'sfileURLToPath
No changes were needed for dynamic import or app.setPath as they were not used.
Preload Script
#- No changes
In a sandboxed environment, since the ESM Loader is not supported, traditional require is used when calling Electron features.
Renderer Process
#- No changes
The repository for this app is available here.
Conclusion
#With the introduction of ESM support, it is likely that more Electron apps and packages will become ESM compatible.
In an article written early last year, "History of Electron Programming Models Seen through electron-quick-start's Commit History", I speculated that,
In the future, support for ES Modules and similar features might be introduced.
Looking at the electron-quick-start repository, ESM support has not yet been implemented in the code itself.
