Javascript modules import fails

Manish Deshpande

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?

T.J. Crowder

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:

enter image description 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);
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

IntelliJ IDEA: How to import a project that has Java and JavaScript modules?

Javascript Modules SyntaxError: Cannot use import statement outside a module

from ... import OR import ... as for modules

Versioned import in go using modules fails

VSCode import "C" fails on modules

Import Modules in Nifi ExecuteScript

Import modules using an alias

Import UMD Javascript Modules into Browser

py.test does not correctly import modules from conftest - fails with ConftestImportFailure: ModuleNotFound

Isomorphic import of CommonJS modules

modules exist, pyCharm suggest me the name, but import fails

Cannot import modules in javascript

Can't figure out how to import modules in browser with javascript

Why are there different ways to import Modules in JavaScript?

import a list of modules

Javascript module import fails - why?

JavaScript modules import / export

Preload dynamic Javascript `import(modules)` with `<link/>` in HTML?

Javascript import all modules from a file as a global variables

How to import javascript modules and bundle into a single js file with rollup?

Import Angular JavaScript Modules into TypeScript

Import modules and export at runtime

how to import javascript modules from outside the main folder

Problem with import from node_modules in javascript

Import modules into next js

S3 upload fails due to import modules collision

Typescript compiles fine, but emitted JavaScript import fails

Javascript how to use modules to Import/Export all from file?

Import javascript from node_modules in angular