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

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


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


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.jsimport {sum} from './calc.js'console.log(sum(2,3));
//calc.jslet 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!


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