2

I can't seem to get ES6/2015 imports to work. From this Understanding ECMAScript 6 book, I understand I need to write my <script> tags with a type attribute of modules:

<script type="module" src="module.js"></script>

Then I can use import within module.js. However, it doesn't work on the latest Firefox (v48.0.1) and Chrome (v53.0.2785.89). Nothing gets logged to the console when I put a console.log statement in module.js.

How can I use ES2015's import mechanism in a browser (natively, not using something like babel/webpack)?

UPDATE: Looks like Microsoft's Edge browser supports modules, at least in experimental mode. Why aren't other browsers supporting it yet then, at least in experimental mode?

at.
  • 50,922
  • 104
  • 292
  • 461
  • 3
    ES6 modules are not supported in browsers yet. – loganfsmyth Sep 06 '16 at 20:05
  • You... can't. Wait for the runtimes to support it and use webpack in the mean time. – ssube Sep 06 '16 at 20:05
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import no support yet – Daniel Lizik Sep 06 '16 at 20:06
  • 2
    The key thing is that while the syntax for modules has been defined in the ECMAScript 6 spec, the logic for deciding how modules are loaded has not, which is why browsers have not implemented them yet. Babel just uses Node's CommonJS module loading behavior. – loganfsmyth Sep 06 '16 at 21:11
  • 1
    'How to get X to work' is **not** the same question as 'Which browsers support X'. Stop marking everything about Javascript as a duplicate of each other please. – Stijn de Witt Jan 27 '17 at 07:51
  • @loganfsmyth: Chrome and Safari now [support](http://caniuse.com/#feat=es6-module) ES6 modules. – Dan Dascalescu Sep 26 '17 at 09:08

2 Answers2

2

You can't. The syntax and contract has been defined in the ECMAScript specification, but no implementation exists in any major runtime.

Until some platform provides a built-in System object and the associated module loading, you're stuck with Webpack or something similar to polyfill.

While this may seem like a dramatic omission on the browser's part, the feature is easy enough to polyfill.

ssube
  • 47,010
  • 7
  • 103
  • 140
  • 1
    Is there a good polyfill library for this? – at. Sep 06 '16 at 20:51
  • I believe both [Webpack 2](http://stackoverflow.com/questions/36103641/dynamic-system-import-with-webpack) and [SystemJS](https://github.com/systemjs/systemjs) support the `System` object and most features on it. They are both much heavier than just a polyfill, unfortunately. – ssube Sep 06 '16 at 20:57
  • 1
    Actually Webpack shims `System.import` at *transpilation time* i.s.o at *runtime*. So internally in your bundle.js modules are looking each other up using `System.import` (or `import`) but from the outside this won't help you. At runtime you will still not see a `System.import` object that you can interact with. – Stijn de Witt Jan 27 '17 at 07:55
  • 1
    As of September 2017, Chrome and Safari now [support](http://caniuse.com/#feat=es6-module) ES6 modules in the stable version, while Firefox supports them behind a flag. – Dan Dascalescu Sep 26 '17 at 09:10
0

For the moment the import and export ES6 features aren't supported natively by any browser (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export for more informations about it).

You need to use a compiler that will convert your code using these keywords, one of the most common and used is babel.

ClementNerma
  • 1,079
  • 1
  • 11
  • 16
  • I'm aware of babel, as I mentioned in the question. Strange that it seemed like modern browsers were almost 100% on ES6/2015 (at least according to https://kangax.github.io/compat-table/es6/) – at. Sep 06 '16 at 20:53
  • The ES2015 standard defines the syntax and semantics of importing and exporting variables, but it does not define where modules can actually be loaded from. I believe that's part of an upcoming HTML/DOM standard. – Macil Sep 07 '16 at 01:47