72

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?

Improve this question
6
  • Is there an associated line number? Which file is the error in? Commented Dec 4, 2017 at 11:44
  • @BoyWithSilverWings forgot to add that, Just added now. It's on the import line in main.js Commented Dec 4, 2017 at 11:45
  • 11
    Shouldn't main.js need type="module" as well? It uses module syntax, after all. Commented Dec 4, 2017 at 11:53
  • Your window.addEventListener( call is missing a closing parenthesis Commented Dec 4, 2017 at 11:53
  • What if you are not using HTML? Commented Jan 5, 2019 at 14:19

3 Answers 3

Reset to default
65

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

In a previous comment you said adding the semicolon fixed it. Now you're saying adding the type fixed it.
@TomRussell Which comment? Because I'm unable to locate it. The issue for me was with the type="module" thing.
Where? Which comment? What's the solution?
@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
where would one add type="module" in the file?
|
4

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.

Improve this answer

1 Comment

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.
1

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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.