Uncaught syntax error when using ES-6 import syntax in Chrome

Question

this is the first time I'm using modules. I've read some tutorials and googled all over but haven't found a solution to my problem.

I have these files with the following code:

index.html

<script type="module" src="~/js/fight.js"></script>
<script type="module" src="~/js/queue.js"></script>

fight.js

$(document).ready(() => {
    import { test } from './queue.js';
    console.log(test);
})

queue.js

export let test = 'queue file has loaded';

And I get this error: Uncaught SyntaxError: Unexpected token '{'

I'm using live server from Visual Studio, Chrome 83.

Any ideas will be appreciated!

Answer 1

That's how it should be and make sure to import jQuery as well unless you've removed for brevity because $(document).ready wont work

import { test } from "./queue.js";
$(document).ready(() => {
  console.log(test);
});