Es6 Modules in the Browser: Uncaught Syntaxerror: Unexpected Token Import

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

Uncaught SyntaxError: Unexpected token { while importing

Based on the error message

you're running Chrome,
you haven't set type="module" in the script tag

I'm trying to find some good documentation regarding module type for script tag, however this is the best I can find so far

So, if your script tag is

<script type="application/javascript">
import {Event} from "event.js";
......
</script>

or even if it is the following (because type is optional)

<script>
import {Event} from "event.js";
......
</script>

change it to

<script type="module">
import {Event} from "event.js";
......
</script>

Uncaught syntax error when using ES-6 import syntax in Chrome

That's how it should be and make sure to import jQuery as well unless you've removed for brevity because $(document).ready wont work

import { test } from "./queue.js";
$(document).ready(() => {
  console.log(test);
});

Node.js - SyntaxError: Unexpected token import

Node 13+ Since Node 13, you can use either the .mjs extension, or set {"type": "module"} in your package.json. You don't need to use the --experimental-modules flag. Modules is now marked as stable in node.js

Node 12 Since Node 12, you can use either the .mjs extension, or set "type": "module" in your package.json. And you need to run node with the --experimental-modules flag.

Node 9 In Node 9, it is enabled behind a flag, and uses the .mjs extension.

node --experimental-modules my-app.mjs

While import is indeed part of ES6, ~~it is unfortunately not yet supported in NodeJS by default, and has only very recently landed support in browsers.~~

See browser compat table on MDN and this Node issue.

From James M Snell's Update on ES6 Modules in Node.js (February 2017):

Work is in progress but it is going to take some time — We’re currently looking at around a year at least.

Until support shows up natively (now marked stable in Node 13+), ~~you'll have to continue using classic require statements~~:

const express = require("express");

If you really want to use new ES6/7 features in NodeJS, you can compile it using Babel. Here's an example server.

Chrome 61: Unexpected token import

For those of you who want to know exactly what worked for me, it was kind of a combination of a couple answers from above. I also had to enable the ES6 import capabilities of Chrome by typing chrome://flags in the URL bar and searching for "import".

First the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing JavaScript Stuff</title>
</head>
<body>
    <script type="module">
        import { circleArea, squareArea } from './CalcArea.js';

        console.log(circleArea(2));
        console.log(squareArea(2));
    </script>
</body>
</html>

So as you can see just add the type "module" to your script tag, then below you do the import. For my test the CalcArea.js file is this:

const circleArea = r => 3.14 * (r ** 2);

const squareArea = s => s * s;

export {circleArea, squareArea};

Es6 Modules in the Browser: Uncaught Syntaxerror: Unexpected Token Import