"Uncaught SyntaxError: Unexpected token {" while importing

Question

I am trying to import a function from another javascript file but an error occurs with the import statement in main.js.

main.js:

import {Event} from 'event.js';

let asdf = new Event("hi", "hi", "hi");
console.log(asdf.title);
console.log(asdf.mainText);
console.log(asdf.buttonSet);

event.js:

export function Event(title, mainText, buttonSet) {
    this.title = title;
    this.mainText = mainText;
    this.buttonSet = buttonSet;
}

I looked up the syntax and don't see anything wrong:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Also, I ran the code snippet in this link and got the same error. ES6 in the browser: Uncaught SyntaxError: Unexpected token import

Edit: Corrected index.html file:

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

Answer 1

Based on the error message

1. you're running Chrome,
2. 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>

Answer 2

Your syntax is fine if you're using a transpiler, specifically babel is the transpiler most people use these days.

You can specifically enable some es6 functionality (including import and export) in modern browsers using the "module" type in your script <script type=module src="main.js" /> but if you're running locally cross origin request stuff will not cooperate, so you can host your code locally using a web server like express.js

There are many many tutorials available online giving you a rundown on how to begin with web development in the modern age, but here's a list of topics you can research yourself.

1. node.js This is for javascript execution
2. express.js This is for creating servers using node.js
3. es6 This is a specification, a newer "version" of ecmascript (javascript), it has new features like import and export and object destructuring
4. babel This is a transpiler, something that converts new code (such as es6) into code that can run on older systems (such as es5)
5. webpack This is a javascript packaging system, used to combine code and execute modules like transpilers

There's a lot to learn, and one of the best places that we as a community can improve. To avoid all of the messy startup stuff you can try a project like https://codesandbox.io/ which aims to make this whole process much easier.

Answer 3

In your export

Export default function Event(title,mainText,buttonSet){
    this.title=title;
    this.mainText=mainText,
    this.buttonSet=buttonSet;
}

And in your import

import Event from "event.js";