<p>These are my sample files:</p> <pre class="prettyprint"><code><!DOCTYPE html> <html> <head> <title>Test</title> <script src="t1.js"></script> </head> <body></body> </html> </code></pre> <p>t1.js:</p> <pre class="prettyprint"><code>import Test from 't2.js'; </code></pre> <p>t2.js:</p> <pre class="prettyprint"><code>export const Test = console.log("Hello world"); </code></pre> <p>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?</p>

<p>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:</p> <pre class="prettyprint"><code><script src="t1.js" type="module"></script> </code></pre> <p>I found it in <strong>this document about using ES6 import in browser</strong>. Recommended reading.</p> <p>Fully supported in those browser versions (and later; full list on caniuse.com):</p> <ul> <li>Firefox 60</li> <li>Chrome (desktop) 65</li> <li>Chrome (android) 66</li> <li>Safari 1.1</li> </ul> <p>In older browsers you might need to enable some flags in browsers:</p> <ul> <li>Chrome Canary 60 – behind the Experimental Web Platform flag in <code>chrome:flags</code>.</li> <li>Firefox 54 – <code>dom.moduleScripts.enabled</code> setting in <code>about:config</code>.</li> <li>Edge 15 – behind the Experimental JavaScript Features setting in <code>about:flags</code>.</li> </ul>

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

Tags:

javascript

html

ecmascript-6

firefox

es6-modules

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?

816

asked Jun 03 '16 23:06

Christoph Burschka

2 Answers

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.

191

answered Oct 29 '22 15:10

Tomáš Zato - Reinstate Monica

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:

enter image description here

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