ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

ZeroThe2nd :

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?

ZeroThe2nd :

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

"Uncaught SyntaxError: Unexpected identifier"

JS carousel - Uncaught SyntaxError: Unexpected identifier

Import React from 'react' results in Uncaught SyntaxError: Unexpected identifier

Firebase: Uncaught SyntaxError: Unexpected identifier

React-Table giving an Uncaught SyntaxError: Unexpected Identifier in propTypes.js

Script error : "Uncaught SyntaxError: Unexpected identifier"

import React from "react"; resulting in Uncaught SyntaxError: Unexpected identifier

Uncaught SyntaxError: Unexpected identifier (imported class in javascript)

Angular app causes Uncaught SyntaxError: Unexpected identifier on import-from in JavaScript

Using import statement, why does it fail with "Uncaught SyntaxError: Unexpected identifier""

Uncaught SyntaxError: Unexpected identifier - Webshare api

Uncaught SyntaxError: Unexpected identifier with import statement

How to import a variable from a JS file in another JS file that uses Vue CDN? - Uncaught SyntaxError: Unexpected identifier

Uncaught SyntaxError: Unexpected identifier at compute

How to fix "Uncaught SyntaxError: Unexpected identifier" on yield

Uncaught SyntaxError: Unexpected identifier in import Echo from 'laravel-echo' js file present in resources/js/bootstrap.js

Using eval() - Uncaught SyntaxError: Unexpected identifier at pageLoad

Uncaught SyntaxError, Unexpected Identifier in for loop in jade

Uncaught SyntaxError: Unexpected identifier IN Chrome

Embeddin PHP into Javascript ,Uncaught SyntaxError: Unexpected identifier

Uncaught SyntaxError: Unexpected identifier

What's causing `Uncaught SyntaxError: Unexpected identifier`?

Javascript Uncaught SyntaxError: Unexpected identifier

Uncaught SyntaxError: Unexpected identifier in html

Uncaught SyntaxError: Unexpected identifier in empty line?

Javascript import class from file yields "Uncaught SyntaxError: Unexpected Identifier"

Uncaught SyntaxError: Unexpected identifier within bookmarklet

Node js Uncaught SyntaxError: Unexpected identifier

"Cannot use import statement outside a module" and "Uncaught SyntaxError: Unexpected identifier" when importing a class