ES6 Module throwing unexpected token error

Question

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?

Answer 1

<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'; .

Answer 2

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>