CODEWITHSUNDEEP
javascriptecmascript-6es6-modules
Adam McGurk
Adam McGurk

Reputation: 476

ES6 Module throwing unexpected token error

I'm absolutely blown away that I'm having this issue, but here we go. I'm getting the error in the console:

Uncaught SyntaxError: Unexpected token {

On this line of code in my index.js file:

import { CountUp } from '/js/count-up.js';

That line is the first line in the file and my script tags on the HTML page look like this:

<script type="module" src='/js/count-up.js'></script>
<script src='index.js'></script>

I'm on a Macbook pro running Mojave and I'm in Chrome 73.

I really don't know where I've gone wrong here, why am I getting an uncaught syntax error on a simple es6 module import?

Upvotes: 0

Views: 2926

Answers (2)

Quentin
Quentin

Reputation: 944520

<script src='index.js'> is missing the type="module" attribute, so it is trying to load it without support for ES6 module syntax (which is needed for import).

Aside:

Remove:

<script type="module" src='/js/count-up.js'></script>

You only need to load the entry point to your JS program with a <script> element. /js/count-up.js is loaded using import { CountUp } from '/js/count-up.js';.

Upvotes: 6

GrafiCode
GrafiCode

Reputation: 3374

Use the attribute "type" in your script declaration:

https://github.com/inorganik/countUp.js/

"Include in your html. Notice the type attribute"

<script src="./js/countUp.min.js" type="module"></script>

Upvotes: -1

Related Questions