Project setup
- Electron app using electron-builder, which uses vite as build system. The build system is still almost identical to the template.
- TypeScript, with the
.ts
file extension - ESM and
import
everywhere in our code. We do not userequire()
anywhere in our code base. - Obviously, we’re using various third-party npm libraries.
Reproduction
yarn add electron-context-menu
. This is an ESM-only (!) third-party npm library.- Start the app using
yarn dev run
The problem is not limited to this library. I have seen the same error multiple times in the past, with different libraries. It appears to be a generic problem with rollup or vite in combination with ESM-only modules.
Actual result
- Error, see below for console output
Expected result
(and actual result before adding electron-context-menu
)
- App starts without errors
Code
Reduced code of the e2/src/main/index.ts file:
import { BrowserWindow } from 'electron'
import contextMenu from 'electron-context-menu'; // <-- fails here
function createWindow(): void {
contextMenu({});
const mainWindow = new BrowserWindow({...})
...
}
createWindow();
...
You find the rest of the files, including the build config files, at https://github.com/mustang-im/mustang/tree/4fc959d/e2
Error
App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module /e2/node_modules/electron-context-menu/index.js from /e2/out/main/index.js not supported.
Instead change the require of /e2/node_modules/electron-context-menu/index.js in /e2/out/main/index.js to a dynamic import() which is available in all CommonJS modules.
at f._load (node:electron/js2c/asar_bundle:2:13377)
at Object.<anonymous> (/e2/out/main/index.js:37:21)
at f._load (node:electron/js2c/asar_bundle:2:13377)
at loadApplicationPackage (/e2/node_modules/electron/dist/resources/default_app.asar/main.js:121:16)
at Object.<anonymous> (/e2/node_modules/electron/dist/resources/default_app.asar/main.js:233:9)
at f._load (node:electron/js2c/asar_bundle:2:13377)
at node:electron/js2c/browser_init:2:123937
at node:electron/js2c/browser_init:2:124140
at node:electron/js2c/browser_init:2:124144
at f._load (node:electron/js2c/asar_bundle:2:13377)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: require() of ES Module /e2/node_modules/electron-context-menu/index.js from /e2/out/main/index.js not supported.
Instead change the require of /e2/node_modules/electron-context-menu/index.js in /e2/out/main/index.js to a dynamic import() which is available in all CommonJS modules.
at f._load (node:electron/js2c/asar_bundle:2:13377)
at Object.<anonymous> (/e2/out/main/index.js:37:21)
at f._load (node:electron/js2c/asar_bundle:2:13377)
at loadApplicationPackage (/e2/node_modules/electron/dist/resources/default_app.asar/main.js:121:16)
at Object.<anonymous> (/e2/node_modules/electron/dist/resources/default_app.asar/main.js:233:9)
at f._load (node:electron/js2c/asar_bundle:2:13377)
at node:electron/js2c/browser_init:2:123937
at node:electron/js2c/browser_init:2:124140
at node:electron/js2c/browser_init:2:124144
at f._load (node:electron/js2c/asar_bundle:2:13377)
Fix attempts
What I tried to fix it:
- Error msg suggests to “change the require of …”: We’re not using
require()
at all. Very confusing and misleading error msg. I suspect rollup converts theimport
into arequire()
? - I’ve tried with and without
type: module
in e2/package.json (of the electron app) – same result. Does not fix it. - Various SO answers are not applicable (already tried, see above) or suggest HACKs that don’t address the underlying problem (see below)
Rejected solutions
What I consider a bad fix with other disadvantages and what I do not want to do:
- Use a dynamic
import()
, because completely unnecessary here. - Rename our code files and change the file extensions
- Downgrade the third-party library and use an old, unmaintained version of it.
Possible solutions
What I could imagine might work:
- Change the build configuration of vite to emit
import
/ESM code instead of transpiling intorequire()
code. - Fix vite?