Javascript ES6 modules not working

Question

I can't figure this out. I have a small app setup with an index.html that includes a javascript file. On the same directory as that file is another file named myJsModule.js with the following code:

export default class{

    doStuff()
    {
        console.log("calling goStuff() from external Module");
    }
}

The main javascript file that is loaded from the html then does the import in this way:

import myJsModule from "myJsModule";
// TESTING MODULES
let myNewModule = new myJsModule();
myNewModule.doStuff();

I have a local web server running using Node, so I'm accesing this index.hmtl through my localhost: http://127.0.0.1:8080.

Im getting the following error: Uncaught SyntaxError: Unexpected identifier (referring to myJsModule on my main js file). I also tried using babel to transpile this into previous javascript. I had the same problem using the "require".

Shouldn't my local server figure this out? Or am I using this wrong?

AFAIK no browser natively supports ES6 modules or ES6 module syntax. So in addition to compiling with Babel, you'll also need to use a module bundler like Webpack or Rollup — djfdev
– djfdev, Commented Nov 10, 2017 at 21:56
It's just an unfortunate part of the history and implementation of JavaScript. Node has it's own module system, so you can use require natively to import a CommonJS style module. ES6 specified a new import/export syntax, but browsers have been slow to implement modules with either syntax (I think maybe Safari is the exception). So in the mean time, best to bundle your browser code with Webpack or otherwise. Modules are really nice to work with, so it's well worth the extra build step. — djfdev
– djfdev, Commented Nov 10, 2017 at 22:09
Looks like there's actually been more progress on this than I thought, you can read about in this article from May. But considering support is still so limited, I think it's going to be quite a while before we can safely use modules in the browser w/o a bundler. — djfdev
– djfdev, Commented Nov 10, 2017 at 22:14
Apart from the fact that ES6 modules appear not to be supported in your environment, this code doesn't work anyway. You export a class, but after importing you try to use it like an instance. Instead, just export function doStuff() { …}, then import * as myJsModule from "myJsModule"; and call myJsModule.doStuff();. — Bergi
– Bergi, Commented Nov 11, 2017 at 9:47

Rob Johansen · Accepted Answer · 2017-11-11 08:00:09Z

4

As of Chrome 61, modules are natively supported. I was able to get your example working with the following HTML and JavaScript.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Native Module</title>
</head>
<body>
    <p>Hello, world!</p>
    <script type="module">
        import MyJsModule from './MyJsModule.js';
        let myJsModule = new MyJsModule();
        myJsModule.doStuff();
    </script>
</body>
</html>

MyJsModule.js:

export default class MyJsModule {

    doStuff() {
        console.log("calling doStuff() from external Module");
    }

}

answered Nov 11, 2017 at 8:00

Rob Johansen

5,17410 gold badges42 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bastrix Over a year ago

You sure about his? I'm using version 62 of Chrome on Windows and it still won't recognize "import". Did you have to enable anything in your chrome://flags/ ?

Bastrix Over a year ago

You are right. I was missing the type="module" attribute in the script tag in my html. I didn't actually know I needed this. I have now modules working in chrome. Many thanks.

animaacija Over a year ago

Also note - there must be "content-type" response header for modules to work.

Collectives™ on Stack Overflow

Javascript ES6 modules not working

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related