Support Node's ES Modules

[Jamesernator]

Important

Support for ES Modules in Electron will land in Electron 28 and will be available in the electron-nightly released on August 31st

🥳

Original Issue Below

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Feature Request

As of Node 13.3 ES modules have been unflagged (albeit still experimental), it would be nice to be able to use ES modules as supported in electron.

Currently when trying to run electron with an ES entry point (either .mjs or .js+"type": "module") electron fails to run.

For example:

> electron-test@1.0.0 start /home/jamesernator/Projects/electron-test
> electron .

App threw an error during load
/home/jamesernator/Projects/electron-test/main.js:1
import electron from 'electron';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:815:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
    at Module.load (internal/modules/cjs/loader.js:735:32)
    at Module._load (internal/modules/cjs/loader.js:648:12)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at loadApplicationPackage (/home/jamesernator/Projects/electron-test/node_modules/electron/dist/resources/default_app.asar/main.js:109:16)
    at Object.<anonymous> (/home/jamesernator/Projects/electron-test/node_modules/electron/dist/resources/default_app.asar/main.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:880:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)

Alternatives Considered

This is primarily a request for support, the alternative is not supporting it but that would be unfortunate given ES modules will be officially supported in both browsers and Node but not usable by electron without additional tooling.

Additional Information

ES Modules are still new (and experimental) so actual implementation might be delayed (or put behind flag) however starting to consider implementation considerations now would be helpful for supporting this more readily in future.

[nornagon]

FWIW, Electron won't be supporting Node 13 as our policy is to only roll in LTS versions of Node. So, while we definitely want to support ESM, this isn't going to be happening until Node 14.

[pauliusuza]

Sure, following LTS makes sense for production releases, but there's no harm in creating a v10 branch and adding ESM support now with Node v13 which can be rolled over to v14 once it's out in April 2020.

[nornagon]

@pauliusuza "no harm" indeed, except that we would then have to make sure we backport every change from master into the v10 branch, which is a significant burden on the maintainer team.

We'll do like we've done for all previous release branches, and branch v10 once v9 is stable. See https://electronjs.org/docs/tutorial/electron-timelines.

[trusktr]

As a workaround, you can use the esm package for the time being. Just install it, import it, then any file you import after that can be an ES Module.

Then, once Node 14 is out and Electron upgrades, all you need to do is modify the entry point not to import esm, and to import your ES Module directly. All the rest of the code base will remain untouched.

[DalderupMaurice]

That got the job done, Thanks! @trusktr
I have a TS monorepo project for desktop and web and every possible combination of tsconfig resulted in one of both being broken. Adding ESM fixed the issue 👍

[awkj]

wish electron use deno replace node

@nornagon ES modules unflagged is expected to land in April for Node 12. For more details, see nodejs/modules#450.

As a workaround, you can use the esm package for the time being. Just install it, import it, then any file you import after that can be an ES Module.

Then, once Node 14 is out and Electron upgrades, all you need to do is modify the entry point not to import esm, and to import your ES Module directly. All the rest of the code base will remain untouched.

I don't quite undestand how you did this. Can you give an example of how this workaround is supposed to work?

Edit: nevermind, I got it working. My code looks like this now (if anyone's wondering):

./main.js:

require = require("esm")(module)
module.exports = require("./js/electronMain.js")

with my Electron (main process) startup code in ./js/electronMain.js

[kskalski]

Node 12.17 removed necessity to enable -experimental-modules flag, so I wonder if after incorporating #23789 it will just start working out of the box. And which electron release will get it... :)

[dy]

It is node@14.4 already, with stabilized support for ESM. It is time for the ecosystem to gradually switch to common standard. Would be really nice if electron enabled modules. esm doesn't work with node@13+.

[nornagon]

As mentioned earlier in the thread, we will support this when Electron includes a version of node which supports it, and not before.

Electron only includes LTS releases of Node, and does not upgrade Node versions in stable releases. Node 14 won't be LTS until October, so the earliest version of Electron that could include Node 14 LTS is Electron 12.

@nornagon Node 12 LTS already supports it.

See the Node release notes:
https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V12.md#ecmascript-modules-----experimental-modules-flag-removal

[nornagon]

Ah, in that case Electron 11 will likely include support for it.