ES6 modules in Chrome - javascript

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

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.

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

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

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:
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.
you need to import the file in the index.js with extension, such as:
import search from "./search.js";
I tried this on Firefox.

Related

Hassle with Javascript imports

Most of the things I read online are either outdated or not precise enough.
I'm gonna try to expose my problem.
I was writing a d3 project comprise of 2 files, whose structure is like following
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
class KMeans {
//class related stuff
}
Everything was working super fine, until I decided to add a new class named "Clustering" in a new file to be inherited by KMeans. The code became like this one :
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script type="module" src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
import {Clustering} from './Clustering.js';
export class KMeans extends Clustering {
//class related stuff
}
Clustering.js :
export class Clustering {
}
And I keep getting this error :
ReferenceError: KMeans is not defined
For info, I'm not using Babel or any transpiler.
For the life of me, I can't understand a thing concerning the module management in JS. Could someone help me shed the light on what's wrong, please ?
After a script is defined as a module the variables defined in it are no longer made public. So, you have two options.
Option 1
You can make both Clustering and KMeans regular, non-module files, and remove all import and export statements. This will solve your issue.
Option 2
You can move the final script tag to its own file and make it a module itself (maybe you can keep in inline and still make it a module but I'm not sure about this), and remember to import KMeans if you want to use it.

Can't import ES6 module

I have problems, importing a module to my index.js file. When I start debugging, I always get the error "Uncaught SyntaxError: Unexpected identifier"
My index.html file:
.
.
.
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/defines.js"></script>
<script type="text/javascript" src="js/jgestures.js"></script>
<script type="text/javascript" src="js/mdb.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="js/global.js"></script>
</html>
The module I want to import "modals.js":
class Modals{
let b = 0;
}
export {Modals};
First line of my index.js file (where the error occures):
import {Modals} from './modals.js'
Does anyone has an idea what's wrong with my code?
Looks like you are not using ES6 classes properly. Also, keep in mind not all browsers work with ES6, it might be better to use functions or a transpiler like Babel.
I'd recommend reviewing the docs to get a refresher, but here is a code snippet of what you'd need to do for your example to work with ES6 classes
Your modals.js file would become:
class Modals{
constructor (b) {
this.b = b;
}
}
export {Modals};
Your index.js:
import {Modals} from './modals.js';
let m = new Modals('something')
console.log('m', m)
Your index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
Good luck!
I would suggest first to check the browser support. ES6 modules have been around for a while now but it may be the case that your browser version does not support this syntax.
Then, you would need a transpiler like Babel to use this type of statements.

Dynamic module loading not working on Firefox - SyntaxError: dynamic module import is not implemented

I try to dynamically load a module on Firefox (version 66.0.2 (64 bits) on OS X 10.14.3) without success.
I get the following error:
SyntaxError: dynamic module import is not implemented
It works fine on Google Chrome.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic module test</title>
<meta charset="utf-8">
</head>
<body>
<p>Test</p>
<script async="" type="module" src="module.js"></script>
<script type="module" src="main.js" ></script>
</body>
</html>
main.js:
let main = ()=> {
import('./module.js').then((loadedModule) => {
console.log('module loaded')
if(loadedModule.activate) {
loadedModule.activate()
}
})
.catch((error) => {
console.log(error)
});
}
document.addEventListener("DOMContentLoaded", main)
module.js:
export function activate() {
console.log('activate module')
}
I made a sample project that you can download export to .zip (File > Export to ZIP).
Since I had no answer so far, I made a bug report on bugzilla.
In Firefox, you can change preferences in about:config to load dynamic modules:
javascript.options.dynamicImport
As noted in comments, FF 67+ should address this problem. It also works with no changes if you use Firefox Developer Edition.

Error when using "import" statement in Javascript

I have a following code and get "TypeError: Error resolving module specifier: solc/wrapper" error. I followed these instructions https://github.com/ethereum/solc-js#browser-usage to put the code together.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/list.js"></script>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js"></script>
<script type="module" defer>
import * as wrapper from 'solc/wrapper';
</script>
</head>
<body>
</body>
</html>
Please any suggestions where is the problem? Thank you.
I don't know what the problem was, since I've never seen that ES6 import syntax before, but I fixed it by specifying exactly where to import from:
<!DOCTYPE html>
<html>
<head>
<script type="module" defer>
// debugging
document.getElementById("runninate").addEventListener("click", function(e){var code=document.getElementById('miniconsole').value; console.log('> ' + code); console.log(eval(code))})
import * as wrapper from 'https://ethereum.github.io/solc-bin/bin/soljson-v0.5.0-nightly.2018.10.15+commit.b965fd6e.js';
const solc = wrapper(window.Module);
</script>
</head>
<body>
<input id="miniconsole" />
<button id="runninate">Runninate!</button>
</body>
</html>
I'm not confident enough to say that the syntax was wrong, but considering that they had a typo in the Node.JS example I doubt they tested this.
Note that this fails to import properly because the thing that's being imported doesn't quite work.
I have to install solc npm package
npm install solc
in order to make the code running.

Loading SystemJS in html ends up with error in PhantomJS

I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.

Categories

Resources