I can't get a basic ES6 Import to work

Question

Sorry, but what basic dumb thing am I doing wrong? I'm following this example code. Do I need a special way of serving the code? (I'm using http-server)

Chrome complains about

"unexpected token {" or
"Unexpected identifier" respectively

Minimal code follows:

mini.js

import {doSomething2} from "mini2";
// import doSomething2 from "mini2";  also fails
// also tried ... from "./mini2"

function doSomething1(url, opts) {
   return "mini1 " + doSomething2(url);
}

mini2.js

export function doSomething2(url, opts) {
   return ("mini2 " + url);
}

mini.html

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

<body onload="console.log(doSomething1('hi there'))">

<header>
</header>
<main>
<h1> Test </h1>     
</main>
</body>

</html>

Update: I'm not using any transpiler or bundler. Following @MohammedWaleed advice, if the .html file uses type = "module" and mini.js imports mini2.js with a detailed path, import {doSomething2} from './mini2.js';, things more or less work. I can run inline code from mini.js which calls mini2.js. The issue is that functions in mini.js, e.g. dosomething1(), seem to be invisible.

Update 2 @loganfsmyth comment works. Seems like if your script is of type "module", you must setup globals manually. Slightly awkward, but fine. To avoid polluting the window global space too much, probably best to use a property of window, here I just used "mini":

window.mini = {
  doSomething1 :function doSomething1(url) {
     return "mini " + doSomething2(url);
  }
  anotherFunction: blah blah...
}

import is not supported in ES6, you'll need to add in a transpiler like babel to do that. I believe it is supported in Node v8.x LTS but for browsers it may not be fully supported yet — Sterling Archer, Jan 11 '18 at 18:10
@SterlingArcher guess I shouldn't have deleted my comment about "does es6 support import?" haha — Cody Ｇ, Jan 11 '18 at 18:11
It appears that an experimental flag was added to 8.5, but https://nodejs.org/api/esm.html#esm_supported this esm_support doc should give more deets on the supporting factors — Sterling Archer, Jan 11 '18 at 18:13
Thanks everybody - that was simple! (I'm not using any transpiler or bundler etc...) But how come **import** is described in both that web page and in Kyle Simpson's "ES6 and Beyond", where it is **not** in the "beyond" part? Was it a last minute change? — user949300, Jan 11 '18 at 18:14
@SterlingArcher yep, exactly: https://stackoverflow.com/questions/37132031/nodejs-plans-to-support-import-export-es6-es2015-modules — Cody Ｇ, Jan 11 '18 at 18:14
@user949300 the use of a transpiler has made import so commonly used some people affiliate it with ES6 — Sterling Archer, Jan 11 '18 at 18:15

Mohammad Waleed · Answer 1 · 2018-01-11T18:24:18.993

1

Have you tried

import {doSomething2} from "mini2.js";

as i noticed it is included in the files in the following link, either way you should check the link it'll help you

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Edit : i found this article on medium it'll help you

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

edited Jan 11 '18 at 18:24

answered Jan 11 '18 at 18:20

Mohammad Waleed

195
9

Yes, tried that, same problems. But thanks for the medium article, will check that out... – user949300 Jan 11 '18 at 18:24
try to give your script tag `type="module"` and see if that works – Mohammad Waleed Jan 11 '18 at 18:25
Yeah, type='module' works! And I need to then `import {doSomthing} from "./mini2.js"` Except I can't seem to export any functions from mini.js, only inline code. But thanks for getting me started. – user949300 Jan 11 '18 at 18:31
1

If you want something to be a global, you'd have to actually create a global with `window. doSomething1 = doSomething1;` in your `mini.js`. – loganfsmyth Jan 11 '18 at 18:51

I can't get a basic ES6 Import to work

1 Answers1