ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
Solution 1
Many modern browsers now support ES6 modules. As long as you import your scripts (including the entrypoint to your application) using <script type="module" src="...">
it will work.
Take a look at caniuse.com for more details: https://caniuse.com/#feat=es6-module
Solution 2
You can try ES6 Modules in Google Chrome Beta (61) / Chrome Canary.
Reference Implementation of ToDo MVC by Paul Irish - https://paulirish.github.io/es-modules-todomvc/
I've basic demo -
//app.js
import {sum} from './calc.js'
console.log(sum(2,3));
//calc.js
let sum = (a,b) => { return a + b; }
export {sum};
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>ES6</h1>
<script src="app.js" type="module"></script>
</body>
</html>
Hope it helps!
Solution 3
Unfortunately, modules aren't supported by many browsers right now.
This feature is only just beginning to be implemented in browsers natively at this time. It is implemented in many transpilers, such as TypeScript and Babel, and bundlers such as Rollup and Webpack.
Found on MDN
Solution 4
it worked for me adding type="module"
to the script import
ing my mjs:
<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'
console.log(module.default()) // Prints: Hi from the default export!
</script>
See demo: https://codepen.io/abernier/pen/wExQaa
cdarwin
Updated on October 02, 2021Comments
-
cdarwin over 2 years
I'm new to ES6 (ECMAScript 6), and I'd like to use its module system in the browser. I read ES6 is supported by Firefox and Chrome, but I'm getting the following error using
export
Uncaught SyntaxError: Unexpected token import
I have a test.html file
<html> <script src="test.js"></script> <body> </body> </html>
and a test.js file
'use strict'; class Test { static hello() { console.log("hello world"); } } export Test;
Why?
-
cdarwin over 7 yearsI read this feature was implemented in a Sof question, but theMDN source is actually more reliable.
-
Emmanuel Mahuni over 6 yearsThat's right... The important part I have come to notice is
<script type="module"></script>
make sure you add that otherwise you will get that error. I was banging my head on the wall continually doing<script>import ... </script>
knowingly that chrome is now said to support ES6 modules without flags, then I noticed that the type attribute was needed to specify to the browser that this is an ES6 module. -
Marc over 6 yearsAccording to the following link Chrome 61 should support import - it doesn't. medium.com/dev-channel/…
-
hoogw almost 6 years{ "message": "Uncaught SyntaxError: Unexpected token {", "filename": "stacksnippets.net/js", "lineno": 24, "colno": 8 }
-
hoogw almost 6 yearsI got above error by run your code snippet above, use chrome v67, why?
-
Roopesh Reddy almost 6 years@hoogw Stackoverflow added that Run code snippet automatically. This code cannot be executed as is. You have to copy the code to index.html and separate .js files as showed above and try in the browser!
-
smohadjer almost 6 yearsYou have to add type="module" to your script tag.
-
Mir-Ismaili about 5 yearsThank useful answer. I removed snippet runner for you. (As I saw StackOverflow snippets can't to has more than one
js
source). -
Chintan Khetiya about 3 yearsMy chrome Version 90.0.4430.93 Error: Uncaught SyntaxError: Cannot use import statement outside a module While I am just trying to use in my JS file only. @RoopeshReddy can you please help me out here.