ES6 modules in Chrome

user_9179696 0
Viewed 4147

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();
ecmascript-6 google-chrome import module javascript
4 Answers

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.

user_70265540

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();
Admin1

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

user_19777990

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.

user_112437750
Related