2

I am so confused about this. All I want to do is simply break up my javascript into modules, and include them in certain pages. Some pages may need my user-module.js , some pages may not.

I have Googled, read the tutorials, and it's still not working for me.

Here is a simple test case:

1. Include my script from my html

<script src="../js/login-view-model.js"></script>

Now, inside there...

2. TRY to include another module/js file


// LoginViewModel


// I NEED MY IMPORT HERE
import { userService } from '../js/viewModels/user-service.js'

var LoginViewModel = function () {

    self = this;

    userService.user.sayHello();

}; // End View Model

ko.applyBindings(new LoginViewModel());

Now, inside my user-service.js

user-service.js

let user = {
     sayHello: function() { alert("hello") };
}

export {user};

I don't see what I am missing.

Do I need to use another JS library to get this simple example working? I am so lost...lol , please help!

Oh, as you can see I am using KnockoutJS. Not sure if that is the problem.

Thank you.

John

John S.
  • 464
  • 2
  • 11
  • 4
    Not sure if it still stands, but the script tag used to need `type="module"` attribute for module scripts. – Teemu Jul 09 '19 at 18:58
  • possible duplicate of https://stackoverflow.com/questions/37624819/es2015-import-doesnt-work-even-at-top-level-in-firefox – Bergi Jul 09 '19 at 18:58

2 Answers2

2

(There isn't really a good way to show how to do this in something like jsfiddle, so I appologize for the inline code)

Here is a very basic example of what you're trying to do (minus the knockout part)

One key here is that you need to tell the browser that your script is a module (type="module") (see ES6 in the browser: Uncaught SyntaxError: Unexpected token import for some other issues you can run into when not defining type as module)

The other key fix to your problem is that you're trying to invoke .sayHello() in the wrong way. 

userService.user.sayHello(); // wrong
userService.sayHello(); // right

You exported user so you don't need to do .user, there is no property of user on your exported object. userService is already user

Working Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="loginviewmodel.js" type="module"></script>
</body>
</html>

View Model

import { user } from "./userservice.js";

user.sayHello();

User Service

let user = {
    sayHello: function() { alert("hello"); }
};

export {user};
mwilson
  • 10,186
  • 5
  • 41
  • 72
-1

you need a module bundler like webpack for example to take care of that

take your main file as an entry and generate a single JavaScript file based on your imports.

Example of a simple webpack configuration.

var path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'output.bundle.js'
  }
};
G.aziz
  • 3,101
  • 1
  • 11
  • 28
  • 1
    Webpack is for bundling/packing up your code. He's just trying to get ES6 modules working. You don't need webpack for that. – mwilson Jul 09 '19 at 19:12
  • 1
    i see but i think he's working on a project and using KnockoutJS it's better to use webpack maybe – G.aziz Jul 09 '19 at 19:16
  • Webpack is certainly a great luxury, but if you don't know how to use modules in the first place, it's just too much to take in all at once. Part of the issue is that the OP doesn't fully understand import/export which is a key to learning how modules work. – mwilson Jul 09 '19 at 19:29
  • 1
    It worked!! Thank you so much guys. And yes, our project coordinator told me to get up to speed with WebPack, so your comments on using it, are right on target. Really, you guys are great. Thanks for being patient with us newcomers. – John S. Jul 09 '19 at 19:46