3

I'm trying to use ES6 modules in Chrome. From all the examples I've looked at the following seems to be the right way to do it, but when I run it in Chrome's developer tools I get this error message...

uncaught SyntaxError: Unexpected token {

...highlighting the import statement in the module (script1.js, below) that's trying to import the module. I've seen a lot of references to problems like this but none of the suggestions to remedy the situation have worked for me. If you could see what I'm doing wrong, I'd sure appreciate your help...

here's the html...

<html>
<head>
    <script src="lib1.js" type="module"></script>
    <script src="script1.js"></script>
</head>
<body>
</body>
</html>

here's the module (lib1.js)...

export function doSomething() {
    alert("in module lib1");
}

here's the script (script1.js) that tries to import the module...

import { doSomething } from "lib1.js";
doSomething();
Lynn Curtner
  • 33
  • 1
  • 4

4 Answers4

4

EDIT: After about an hour of head scratching and finding out that my answer (pre-edit) was downvoted I got to this:

lib.js:

function doSomething() {
    console.log('in module lib');
}
export {doSomething};

script.js:

import { doSomething } from './lib.js';
doSomething();

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>

lib.js, script.js, and index.html are on the same directory.

I added .js to import { doSomething } from './lib.js'; because it didn't work otherwise. According to Mozilla certain bundlers may permit or require the use of the extension for the module-name.

But this only worked on Firefox Quantum (ver. 62.0.3). I enabled Experimental JavaScript on Chrome (ver. 70.0.3538.77) on:

chrome://flags/#enable-javascript-harmony

with no signs of success, but considering this worked on Firefox and that this compatibility table shows both Chrome and Firefox being on the same level of compatibility is making me more confused so I'll probably end up asking a question regarding this whole thing.

Outman
  • 2,292
  • 1
  • 13
  • 19
  • still no go. I'm not sure I understand, though. lib1.js is the module, not script1.js, so shouldn't the "type = 'module'" go with the lib1.js declaration in the html? – Lynn Curtner Oct 25 '18 at 16:56
  • A module _is_ a script, it just contains the new ES6 syntax, see [here](https://stackoverflow.com/a/39652842/7026554) – Outman Oct 25 '18 at 17:01
  • so, is script1.js actually a "module", since it contains the "import" statement? – Lynn Curtner Oct 25 '18 at 17:09
  • Yes, `import` (and `export`) is a syntax error if the script is not a module. – Josh Lee Oct 25 '18 at 17:18
  • well, that makes sense, and it gets rid of the error message. But, why, after doing the import in script1.js does the function invocation of doSomething() not fire? – Lynn Curtner Oct 25 '18 at 17:28
  • @LynnCurtner you need to prefix your path with './', as I wrote here: https://stackoverflow.com/a/52994151/4521733 –  Oct 25 '18 at 18:20
  • @Outman I downvoted your answer because you basically copied my answer and got accepted: https://stackoverflow.com/a/52994151/4521733 Removed my downvote now, even your answer is still wrong. –  Oct 29 '18 at 09:49
1

Thanks, it finally works for me, though this was really confusing to me at first!

In case anybody's interested, there are two confusing things that finally made it for me after walking around in circles for a while:

  1. You add type="module" to the <script> into which you import the module, not the module itself. In fact, there is only one <script> in the index.html file. The modules are then only imported from within the index.js file.

  2. you need to import the file in the index.js with extension, such as:

import search from "./search.js";

I tried this on Firefox.

Tomáš Hartman
  • 21
  • 4
0

Your code won't work in any browser. This is the right way to do it:

index.html

<html>
<head>
    <script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>

lib.js

export function doSomething() {
    alert("in module lib1");
}

script.js

import { doSomething } from "./lib.js";
doSomething();
0

<script src="script.js" type="module"></script> is the key ... shame on error message in Chrome

lukyer
  • 6,141
  • 1
  • 31
  • 28