ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

87
votes

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?

4
javascripthtmlecmascript-6modulees6-modules
ES6 modules are not yet supported in the browser. Also you're still loading a script, not a module. - Bergi
I still don't understand the difference between a script and a module - cdarwin
See here - Bergi
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. - Emmanuel Mahuni
I am using Chrome 68, I still see this error when we use import * from - Integration

4 Answers

68
votes

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

53
votes

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!

25
votes

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

11
votes

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