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

javascript html ecmascript-6 module es6-modules
cdarwin picture cdarwin · Jan 18, 2017 · Viewed 106.2k times · Source

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?

Answer

vullnetyy picture vullnetyy · Dec 2, 2018

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

Related questions

Concatenating variables and strings in React

Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state: {this.state.id} and the following HTML attributes on a tag: href="#demo1" id="demo1" Is there …

Read More
ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when …

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

These are my sample files: <!DOCTYPE html> <html> <head> <title>Test</title> <script src="t1.js"></script> </head> <body></body> &…

Read More