4

I am writing apps using Electron. The current version, 4.0.6, is based on Node 10.11.0 and Chrome 69.0.3947.106.

I thought the latest version of Electron would support ECMAScript (ES6) modules but I have not been able to make them work, so far. In particular, on starting the app, the line:

import { runTask } from './action';

gives the run-time error:

Uncaught SyntaxError: Unexpected token {

Before I put more effort into tracking down the problems, I would like to know the status of module support in Electron.

Does Electron version 4 (Chrome 69) support ECMAScript (ES6) modules?

HarryB
  • 49
  • 3
  • https://discuss.atom.io/t/does-electron-support-es6/19366/19 – Mayank Vadiya Mar 07 '19 at 21:25
  • Do you use import syntax in your main or renderer process? – ghybs Mar 08 '19 at 09:18
  • Mayank: Thanks for the link. I would like to avoid using Babel or other transpilers in Electron, because it uses only one browser technology (Chrome/V8). – HarryB Mar 11 '19 at 11:15
  • @ghybs: I am trying to import in the renderer process. Surely, a supported ES6 language feature should work everywhere, main, renderer, worker processes? – HarryB Mar 11 '19 at 11:17

2 Answers2

2

Chrome has apparently supported them Chrome 63:

https://caniuse.com/#feat=es6-module-dynamic-import

That might mean you can use them in your front-end?

But node v11.11.0 appears to only support them with an extra flag, --experimental-modules:

https://nodejs.org/api/esm.html

I cannot find a reference, but maybe node 10.11.0 is the same, and that will make them work on the Electron back-end too?

(Sorry, I'm still on an older Electron, and happily using old-fashioned require(), so cannot tell you from personal experience if it will work.)

Darren Cook
  • 27,837
  • 13
  • 117
  • 217
  • Thanks Darren. Yes, I gave up on import and reverted to require(). It works, but I thought import would be supported by now (ES6 = 2015) and I must be doing something wrong... – HarryB Mar 11 '19 at 11:25
1

Surely you are missing the type="module" attribute on your <script> tag.

Then you will hit the file protocol issue, which you can work around by registering your own protocol, as described in Electron ES6 module import

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • No, because the module is not being loaded by HTML with – HarryB Mar 14 '19 at 19:11
  • Yes that is exactly the same situation. So you are mixing require and import (which you never mention in your question BTW)? Without the `type="module"` attribute set, the import syntax is invalid "all the way down". – ghybs Mar 15 '19 at 01:31
  • No. I am not mixing require and import. I require CommonJS modules and import ES6 modules. The CommonJS approach is working, ES6 approach is not. – HarryB Mar 22 '19 at 21:02