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!

what you look for is 'dynamic imports' check here for more info in this topic: javascript.info/modules-dynamic-imports — mtx
– mtx, Commented May 27, 2020 at 19:26

Zain Zafar · Accepted Answer · 2020-05-27 19:08:18Z

2

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); });

answered May 27, 2020 at 19:08

9367 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yes, i skipped jq import for brevity. Moving import above worked. Thanks a million!

You click the check mark on the left of answer so that it can be considered as closed. Thanks.