ES2015 import doesn't work (even at top-level) in Firefox
Solution 1
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 inabout:config
. - Edge 15 – behind the Experimental JavaScript Features setting in
about:flags
.
Solution 2
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).
Solution 3
Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.
You can refer it here: https://javascript.info/modules-intro
Live server VS code extension
link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Solution 4
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';
Solution 5
Add type=module
on the scripts which import and export the modules would solve this problem.
Related videos on Youtube
Comments
-
Christoph Burschka about 2 years
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?
-
Felix Kling almost 8 yearsES6 modules are not supported in browsers yet.
-
Andrew S over 5 yearsNot true Felix. Not even in 2016. Not supported by 'All' browsers would be more accurate.
-
-
evolutionxbox almost 8 yearsCan you turn these features on using a flag (such as in chrome)?
-
Bergi almost 8 years@evolutionxbox: If the features are not impelemented, then there's no flag either.
-
Tomáš Zato over 6 yearsIf 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.
-
Josh Beam over 6 years@TomášZato, just depends on however whatever browser you're using decided to handle it
-
Tomáš Zato over 6 yearsActually, 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.
-
Christoph Burschka over 6 yearsThanks; this seems to be new information (compare the previous answer's browser support table with developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) so I'm switching to your answer as
import
is no longer unsupported. -
Catweazle about 6 yearsworking 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';
-
fredoverflow almost 6 years@Catweazle Are you sure it's
'./t2.js'
and not'./t2'
without the.js
? -
Tomáš Zato almost 6 years@fredoverflow Yeah, full name must be specified, unlike in Node.js.
-
bharal over 5 yearsneeds a full example, not just the import
-
Tomáš Zato over 5 years@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.
-
David Silva-Barrera about 3 yearsYou have to be careful because it is affected by the use of
"file:///"
protocol. -
MarsAndBack over 2 yearsAlso scrutinize whether you need leading
/
or./
in the path e.g.'./foo.js'