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>
To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type of your <script /> tags to module , e.g. <script type="module" src="index. js"></script> . The type="module" attribute is supported in all modern browsers and allows us to use the ES6 modules syntax.
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
To solve the "Uncaught SyntaxError: Unexpected identifier" error, make sure you don't have any misspelled keywords, e.g. Let or Function instead of let and function , and correct any typos related to a missing or an extra comma, colon, parenthesis, quote or bracket.
Based on the error message
type="module"
in the script tagI'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>
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.
node.js
This is for javascript executionexpress.js
This is for creating servers using node.js
es6
This is a specification, a newer "version" of ecmascript (javascript), it has new features like import and export and object destructuringbabel
This is a transpiler, something that converts new code (such as es6) into code that can run on older systems (such as es5)webpack
This is a javascript packaging system, used to combine code and execute modules like transpilersThere'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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With