Javascript modules import fails

Question

I'm trying enter code here in to execute an imported module from a HTML page. I get to see that it's partially getting executed. I need help. My code files are test.html, main.js and say.js. These files are produced below in the same order.

test.html:

<html>
 <head>
     <script type="module" src="./main.js"></script>
 </head>
 <body onload="sayHi('Manish')">
 </body>
</html>

main.js:

import { sayHi } from './say.js';
sayHi('MK');

say.js:

export function sayHi(user) {
alert('Hello, { $user }');}

This code partially executes

Then after this partial execution, it gives an error

Uncaught ReferenceError: sayHi is not defined

at onload (test.html:7)

The picture of the error is as shown below:

This is the error that says sayHi function is not recognized. Why?

What am I doing wrong here?

Since you seem to be a bit of a beginner with this stuff, can I strongly recommend using one of the standard, reasonable forms of indentation and bracing, not what's used in the question, in particular: 1. Indent the code of a function, 2. Don't put the closing brace on the same line as the last statement in a block. #1 makes it much easier to read the code, and #2 makes it much easier to edit the code. — T.J. Crowder
– T.J. Crowder, Commented Jul 2, 2019 at 15:08

T.J. Crowder · Accepted Answer · 2019-07-03 07:59:48Z

One of the great things about modules is that top level declarations, etc., in them don't create globals. One of the bad things about onxyz-attribute-style event handlers is that the functions you call with them have to be globals. Your sayHi isn't a global, so onload="sayHi('Manish')" fails because it doesn't have access to sayHi.

Which is a good thing.

Instead, just call the function from main.js:

import { sayHi } from './say.js';
sayHi('MK');
sayHi('Manish');

Because module scripts are automatically deferred until the end of HTML processing, you know that won't happen until all the HTML is loaded. This is covered by a great graphic in this section of the spec, duplicated here:

If you want to wait longer, until the load event (which doesn't fire until all images and such are loaded), use a modern event handler to do that:

import { sayHi } from './say.js';
sayHi('MK');
window.addEventListener("load", () => {
    sayHi('Manish');
});

If you need information from the element you hooked the event on, use a traditional function and access the element as this, or accept the event parameter and use event.currentTarget (you can also use event.target for the element that the event targets, which could be within the element you hooked the event on). So for instance, suppose you have:

<button type="button" data-name="Manish" id="btn-say-hi">

you could have:

import { sayHi } from './say.js';
document.getElementById("btn-say-hi").addEventListener("click", function() {
    sayHi(this.getAttribute("data-name"));
});

Also note that as Vikas Saini pointed out your say.js is using a string literal instead of a template literal (and although he/she didn't mention it, also has the wrong syntax for a substitution), so you'll actually see the text Hello { $user } instead of seeing Hello MK or Hello Manish. Either use a template literal with the correct form of substitution (${user}, not { $user }):

export function sayHi(user) {
    alert(`Hello, ${user}`);
}

or simple string concatenation:

export function sayHi(user) {
    alert("Hello, " + user);
}

HI Mr. Crowder, your code works. However, I'd like to know if I can pass a parameter externally from the HTML file to the main.ja file. This will ease out a lot many things for me. Would really appreciate if you can guide me in this regard. The main idea is to pass a parameter to the function being called so that it behaves accordingly.
@ManishDeshpande - If you need information about the element the event occurred on, use a traditional (non-arrow) function and use this to access the element you hooked the event on with addEventListener. (Or you can accept the event parameter and use event.currentTarget to get the same element.) You can put data-* attributes on the element that the function can access. I'm out for about 30 minutes but I can add an example of that.

Vikas Saini · Accepted Answer · 2019-07-02 15:14:16Z

1

Classic case of String interpolation

Use

export function sayHi(user) { alert(`Hello, ${user}`);}

Notice ` in place of ' or "

Reference https://campushippo.com/lessons/how-to-do-string-interpolation-with-javascript-7854ef9d

For the Error, bind the window to load

window.addEventListener("load", () => {
    sayHi('testing');
});

edited Jul 2, 2019 at 15:14

answered Jul 2, 2019 at 14:55

Vikas Saini

4862 silver badges13 bronze badges

3 Comments

T.J. Crowder Over a year ago

"Edit: Not able to post ` as its getting replaced in that code but just replace ' with the mentioned symbol" Use the {} button on the toolbar. Also the [?] button.

T.J. Crowder Over a year ago

Note that although this is also wrong in the OP's code, it is not the cause of the error the OP asked about.

Manish Deshpande Over a year ago

Thanks much Vikas, after the changes that I made based on your solution, am able to see that say('MK") in the main.js fires, but the HTML pages errors out with the message: Uncaught ReferenceError: sayHi is not defined at test.html:10. <br> That means that the function is not visible or is out of scope in the HTML page. Where is it going wrong?

Manish Deshpande · Accepted Answer · 2019-07-03 13:51:35Z

Basically my objective was to pass some parameter from the HTML script to the main.js file. I have got the required after both of you have given me hints, especially Vikas Saini. The suggestion of adding an event listener in the main.js file helped a lot. Thanks much. I'm posting the corrected and the latest code files for the benefit of ES6 beginners like me.

The test.html file contents

<html>
<head>
    <script type="module" src="./main.js"></script>
</head>
<body>
    <input type="text" id="btn-say-hi"label="fill here" placeholder="Fill in here and click"/>
</body>
</html>

The main.js file contents

import { sayHi } from './say.js';
document.getElementById("btn-say-hi").addEventListener("click", function() {
    sayHi(this.value);
});

The say.js file contents

export function sayHi(user) { alert(`Hello, ${user}`); }

Kindly note: All these files are in the same directory/folder. I could change the text item value and could get the required execution based on my inputs.

Thanks much to T.J. Crowder and a special thanks to Vikas Saini for the code snippet pertaining to adding the event listener. That was a golden suggestion.

Thanks much guys. Regards Manish.

Collectives™ on Stack Overflow

Javascript modules import fails

3 Answers 3

3 Comments

3 Comments

The test.html file contents

The main.js file contents

The say.js file contents

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

The test.html file contents

The main.js file contents

The say.js file contents

Comments

Related