Login/Register
ES6 modules in Chrome
Asked Answered
Solved javascriptgoogle-chromeecmascript-6importmodule
R

5

6

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();
Rochelle answered 25/10, 2018 at 16:16 Comment(0)
R
8

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.

Riyadh answered 25/10, 2018 at 16:27 Comment(7)
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? – Rochelle
A module is a script, it just contains the new ES6 syntax, see here – Riyadh
so, is script1.js actually a "module", since it contains the "import" statement? – Rochelle
Yes, import (and export) is a syntax error if the script is not a module. – Cioffred
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? – Rochelle
@LynnCurtner you need to prefix your path with './', as I wrote here: https://mcmap.net/q/1688713/-es6-modules-in-chrome – Palaeozoology
@Riyadh I downvoted your answer because you basically copied my answer and got accepted: https://mcmap.net/q/1688713/-es6-modules-in-chrome Removed my downvote now, even your answer is still wrong. – Palaeozoology
P
1

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();
Palaeozoology answered 25/10, 2018 at 16:33 Comment(0)
P
0

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

Paronomasia answered 6/5, 2019 at 8:16 Comment(0)
H
0

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.

Hanhhank answered 28/10, 2020 at 17:10 Comment(0)
J
0

Also, you need to run module scripts on a web server in order to create a origin. Else you'll get CORS error. Because index.html and script.js will be of different origins in the file server.

https://github.com/whatwg/html/issues/1888

I was able to run the module script when I started a dev server at 5500 port enter image description here

Judicative answered 1/5 at 14:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.