"import" unexpected token? (chrome 62)

user_511302 0
Viewed 12932

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.

google-chrome javascript
1 Answers

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.

user_1572470
Related