"import" unexpected token? (chrome 62)

Question

While trying to troubleshoot why systemjs didn't find a custom library I installed (could be a follow up question) I was stuck when trying to do things "manually".

So I have a simple system that consists of 3 files:

index.html
hi.js
hi2.js

the index is just:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <script src="hi.js"></script> </body> </html>

hi.js:

import * as hi from "hi2.js"; hi.myFunction();

hi2.js:

function myFunction() { alert('hi') } export { myFunction };

Now when I run (using webstorm and chrome 62) above code, I get the following error, reported by the (chrome) debugger: "Uncaught SyntaxError: Unexpected token import"

What's happening here? I checked for javascript compliance on mdn and it tells me import is supported by chrome 61 and newer. - I use chrome 62 for testing this.

So what's going on, and how to make it work?

Per recomendation I also changed the html line to <script type="module" src="hi.js"></script>. That didn't help at all, same error.

When you added type="module", instead of the unexpected token error, you should have been getting Uncaught TypeError: Failed to resolve module specifier 'hi2.js'. (I did, on Chrome 62.) — T.J. Crowder
– T.J. Crowder, Commented Nov 8, 2017 at 14:28
Here is a plnkr with your files. I've verified this working in Chrome 61 after making the fix to add ./. — JLRishe
– JLRishe, Commented Nov 8, 2017 at 14:31
@T.J.Crowder: indeed, I didn't go deep enough, not running the "module" in debug mode on that and just saw it not work, thinking the error would've been the same; need to wait before accepting. — paul23
– paul23, Commented Nov 8, 2017 at 14:31
@paul23: I hate when I do that (and I do it more often than I'd like). — T.J. Crowder
– T.J. Crowder, Commented Nov 8, 2017 at 14:39

T.J. Crowder · Accepted Answer · 2017-11-08 15:02:37Z

You're correct that you need type="module" on your script tag:

<script src="hi.js" type="module"></script> <!-- ---------------^^^^^^^^^^^^^ -->

You also need a ./ prefix on your module specifier:

import * as hi from "./hi2.js"; // ------------------^^

This is to leave the door open for a specifier with no path at all to have special meaning at some stage as things evolve. From the WHAT-WG spec:

This restriction (that a relative URL specifier must start with /, ./, or ../ – T.J.) is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.

When I make those two changes to your files, with Chrome 62 with no experimental flags set, I get the alert.

Collectives™ on Stack Overflow

"import" unexpected token? (chrome 62)

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related