ES2015 import doesn't work (even at top-level) in Firefox

Question

These are my sample files:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

When I load the page in Firefox 46, it returns "SyntaxError: import declarations may only appear at top level of a module" - but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?

Not true Felix. Not even in 2016. Not supported by 'All' browsers would be more accurate. — Andrew S, Nov 16 '18 at 21:54

Tomáš Zato - Reinstate Monica · Accepted Answer · 2019-06-26T08:10:15.660

142

Actually the error you got was because you need to explicitly state that you're loading a module - only then the use of modules is allowed:

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

I found it in this document about using ES6 import in browser. Recommended reading.

Fully supported in those browser versions (and later; full list on caniuse.com):

Firefox 60
Chrome (desktop) 65
Chrome (android) 66
Safari 1.1

In older browsers you might need to enable some flags in browsers:

Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags.
Firefox 54 – dom.moduleScripts.enabled setting in about:config.
Edge 15 – behind the Experimental JavaScript Features setting in about:flags.

edited Jun 26 '19 at 08:10

answered Sep 26 '17 at 00:08

Tomáš Zato - Reinstate Monica

41,923
41
199
686

1

Thanks; this seems to be new information (compare the previous answer's browser support table with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) so I'm switching to your answer as `import` is no longer unsupported. – Christoph Burschka Sep 27 '17 at 10:06
1

working now without any flags/settings in edge 16299 and chrome 64. One caveat need to import path, not file, so in t1.js: `import Test from './t2.js';` – Catweazle Feb 18 '18 at 14:01
@Catweazle Are you sure it's `'./t2.js'` and not `'./t2'` without the `.js`? – fredoverflow May 22 '18 at 14:22
@fredoverflow Yeah, full name must be specified, unlike in Node.js. – Tomáš Zato - Reinstate Monica May 22 '18 at 14:42
needs a full example, not just the import – bharal Oct 10 '18 at 00:20
@bharal The question was how to import the module. The import is full example as far as this question is concerned. If you need something else, ask a new question. – Tomáš Zato - Reinstate Monica Oct 11 '18 at 10:07
You have to be careful because it is affected by the use of `"file:///"` protocol. – David Silva-Barrera Apr 19 '21 at 13:12

score 15 · Answer 2 · edited Jun 08 '18 at 19:58

15

This is not accurate anymore. All current browsers now support ES6 modules

Original answer below

From import on MDN:

This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.

Browsers do not support import.

Here is the browser support table:

If you want to import ES6 modules, I would suggest using a transpiler (for example, babel).

edited Jun 08 '18 at 19:58

mikemaccana

81,787
73
317
396

answered Jun 03 '16 at 23:36

Josh Beam

17,535
2
32
63

Can you turn these features on using a flag (such as in chrome)? – evolutionxbox Jun 03 '16 at 23:50
4

@evolutionxbox: If the features are *not impelemented*, then there's no flag either. – Bergi Jun 06 '16 at 17:48
1

If the features are not implemented, why don't I get either syntax error or error telling me they're not implemented? This makes no sense. – Tomáš Zato - Reinstate Monica Sep 25 '17 at 23:30
@TomášZato, just depends on however whatever browser you're using decided to handle it – Josh Beam Sep 25 '17 at 23:32
1

Actually, there was an error in my code and it works just fine. Not sure why your answer got upvoted. Browsers that do not support imports do report it. Errors like the one in question are actual errors using imports. – Tomáš Zato - Reinstate Monica Sep 26 '17 at 00:03

krmld · Answer 3 · 2020-02-15T12:07:58.193

3

Just using .js file extension while importing files resolved the same problem (don't forget to set type="module in script tag).

Simply write:

import foo from 'foo.js';

instead of

import foo from 'foo';

edited Feb 15 '20 at 12:07

answered Feb 15 '20 at 11:42

krmld

908
9
8

score 1 · Answer 4 · answered Sep 27 '20 at 14:49

1

Add type=module on the scripts which import and export the modules would solve this problem.

answered Sep 27 '20 at 14:49

Abhishek Khatri

43
1
5

S. K. Biswas · Answer 5 · 2019-03-15T10:04:41.377

you have to specify it's type in script and export have to be default ..for ex in your case it should be,

<script src='t1.js' type='module'>

for t2.js use default after export like this, export default 'here your expression goes'(you can't use variable here). you can use function like this,

export default function print(){ return console.log('hello world');}

and for import, your import syntax should be like this, import print from './t2.js' (use file extension and ./ for same directory)..I hope this would be useful to you!

score 0 · Answer 6 · answered Apr 19 '20 at 10:30

For the sake of argument...

One could add a custom module interface to the global window object. Although, it is not recommended. On the other hand, the DOM is already broken and nothing persists. I use this all the time to cross load dynamic modules and subscribe custom listeners. This is probably not an answer- but it works. Stack overflow now has a module.export that calls an event called 'Spork' - at lest until refresh...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window

ES2015 import doesn't work (even at top-level) in Firefox

6 Answers6

Original answer below

Linked

Related