ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”

Question

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 using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the import line in main.js

I've got the following files:

assets/js/menu.module.js

'use strict';

export default class Menu
{ ... }

assets/js/main.js

import Menu from "./menu.module.js";

window.addEventListener('DOMContentLoaded', () => {
    const menu = new Menu();
});

index.html

<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">

Note that these are only the relevant lines of code.

Using the <script type="module"> line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about import not being defined.

Chrome version would be 62, so according to different sources (including google's update log itself) this should be working, even without the flags.

Can anyone enlighten me as of why this is not working, and what I am doing wrong?

Is there an associated line number? Which file is the error in? — Agney
@BoyWithSilverWings forgot to add that, Just added now. It's on the import line in main.js — ZeroThe2nd
Shouldn't main.js need type="module" as well? It uses module syntax, after all. — Bergi
Your window.addEventListener( call is missing a closing parenthesis — Bergi

ZeroThe2nd ZeroThe2nd · Accepted Answer · 2017-12-04T12:29:05

As @Bergi mentioned in the comment, adding type="module" to the main.js import line in the HTML solved the issue. All is working now. I.e.

<script type="module" src="assets/js/main.js">

Thanks to all of you who responded and tried to help.

ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”

3 Answers