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 use require() anywhere in our code base.
• Obviously, we’re using various third-party npm libraries.

Reproduction

1. npm create @quick-start/electron@latest

• Project name: electron-app
• Select a framework: › svelte
• Add TypeScript? Yes
• Add Electron updater plugin? Yes
• Enable Electron download mirror proxy? No

2. cd electron-app; yarn install; yarn run dev — works
3. yarn add electron-context-menu, and import it to main.ts, as shown below.
4. Start the app using yarn run dev

Note: This is an ESM-only (!) third-party npm library, not built by me. 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 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 vite converts the import into a require()?
• 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)
  • Error [ERR_REQUIRE_ESM]: require() of ES Module not supported
  • Error: require() of ES modules is not supported when importing node-fetch
  • Error [ERR_REQUIRE_ESM]: require() of ES Module index.js not supported

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 into require() code.
• Fix vite?