Menu
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:
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.
760
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, likeimport "jquery"orimport "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.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
