CODEWITHSUNDEEP
javascriptnode.jsimportmoduleecmascript-6
Bastrix
Bastrix

Reputation: 159

Javascript ES6 modules not working

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?

Upvotes: 1

Views: 4199

Answers (1)

Rob Johansen
Rob Johansen

Reputation: 5164

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");
    }

}

Upvotes: 3

Related Questions