95

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?

5
  • ES6 modules are not yet supported in the browser. Also you're still loading a script, not a module.
    – Bergi
    Commented Jan 18, 2017 at 15:02
  • 3
    I still don't understand the difference between a script and a module
    – cdarwin
    Commented Jan 18, 2017 at 15:08
  • See here
    – Bergi
    Commented Jan 18, 2017 at 17:04
  • 25
    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, without which you get that exact error. Commented Sep 13, 2017 at 9:17
  • 2
    I am using Chrome 68, I still see this error when we use import * from Commented Aug 26, 2018 at 19:07

5 Answers 5

74

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

0
53

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!

6
  • 34
    That'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. Commented Sep 13, 2017 at 9:13
  • 1
    { "message": "Uncaught SyntaxError: Unexpected token {", "filename": "stacksnippets.net/js", "lineno": 24, "colno": 8 }
    – hoogw
    Commented Jul 2, 2018 at 16:35
  • 4
    I got above error by run your code snippet above, use chrome v67, why?
    – hoogw
    Commented Jul 2, 2018 at 16:36
  • @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! Commented Jul 8, 2018 at 14:57
  • Thank useful answer. I removed snippet runner for you. (As I saw StackOverflow snippets can't to has more than one js source). Commented Apr 18, 2019 at 0:44
25

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

3
  • I read this feature was implemented in a Sof question, but theMDN source is actually more reliable.
    – cdarwin
    Commented Jan 18, 2017 at 15:11
  • 1
    According to the following link Chrome 61 should support import - it doesn't. medium.com/dev-channel/…
    – Marc
    Commented Sep 19, 2017 at 16:52
  • 4
    You have to add type="module" to your script tag.
    – smohadjer
    Commented Jul 22, 2018 at 11:24
13

it worked for me adding type="module" to the script importing 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

0
0

It could be that you changed an existing script to a module and forgot to remove the original script tag. This is what happened to me and how I got directed to this page. I had originally had this:

<script src="app.js" defer></script>

Then I changed my main script tag to import it as a module and it was working, but I still received the error. I couldn't figure out how it could be working and throwing an error, but I had forgotten to remove the original script tag.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.