javascript - "import" unexpected token? (chrome 62)

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.

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.

Share Improve this question edited Nov 8, 2017 at 14:54 asked Nov 8, 2017 at 14:19 paul23 9,43517 gold badges74 silver badges165 bronze badges

1 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 Commented Nov 8, 2017 at 14:28
1 Here is a plnkr with your files. I've verified this working in Chrome 61 after making the fix to add ./. – JLRishe Commented Nov 8, 2017 at 14:31
1 @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 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 Commented Nov 8, 2017 at 14:39

Add a comment |

1 Answer 1

Sorted by: Reset to default 19

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - "import" unexpected token? (chrome 62) - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)