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?

Solution 1

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.

Solution 2

From what I can see you are trying to load the file menu.module.js while it's actually named menu.js.

PS: From what I recall you could also drop the .js from the import statement.

Solution 3

you can use any module bundler, one of the simple flexible solutions is parcel 2, it's beta right now but you can play with it.

 - npm i -D parcel@next
 - parcel index.html

Comments

[Hunter]

I had a similar situation, but am using php to inject a script. I'm only using vanilla javascript and I needed to put the ".js" extension on my import for it to work. I know with React the .js extension is not needed, but I'm guessing that's going to vary based on what environment you're working in. Hope this helps someone else.

[Tom Russell]

In a previous comment you said adding the semicolon fixed it. Now you're saying adding the type fixed it.

[ZeroThe2nd]

@TomRussell Which comment? Because I'm unable to locate it. The issue for me was with the type="module" thing.

[Pithikos]

Where? Which comment? What's the solution?

[ZeroThe2nd]

@bernard @Pithikos You have to add type='module' to the Main script as well. That's exactly what the answer you left your comment on described. This one: stackoverflow.com/a/47633417/4327948

[ChumiestBucket]

where would one add type="module" in the file?

[Danny Santos]

Super unclear, but I believe the idea is to add type="module" to the script tag which is importing the main.js file as well as the script tag which is importing the module @ChumiestBucket

[user46743]

I had the same problem and the solution works! But why should a consumer of a module be defined as type="module" !?

[John Spiegel]

Note, this also solved the error I was receiving, "Uncaught SyntaxError: Cannot use import statement outside a module". I think it worth noting in the event others see that error instead of the one referenced in the original post.