keeping scope while using import statment - javascript

I have three scripts: main.js, helper.js and module1.js. I need to include module1.js in helper.js, buf if I do this I'm getting an error message. It seems like the moment I use the tpye="module" tag on helper.js it's scope shifts. So how do I achieve the following without an error: (I don't want to make helper.js a module, which would solve the problem, because than I have to manualy import everything.)
index.html
<html>
<head>
<title></title>
</head>
<body>
<script type="module" src='helper.js'></script>
<script type="module" src='main.js'></script>
</body>
</html>
module1.js
export { f1 }
function f1() {
/* DIFFERENT STUFF */
return 0;
}
main.js
// import THINGS from STUFF;
(() => {/*STUFF*/})();
let res = importantValue;
helper.js
import { f1 } from "./module1.js";
const importantValue = f1();
Error Message:
main.js: Uncaught ReferenceError: importantValue is not defined

Related

JavaScript - Call function from another module inside HTML page

I have a module i18n.js which I import in my home.html, like this:
<html>
<head></head>
<body>
<script type="module" src="../js/lib/i18n.js"></script>
</body>
</html>
Inside the i18n.js module, I do the following:
export const t = () => {};
//
// Global scope
//
window.t = t;
I understand that accessing the global window object is the way to go in order to be able to call a method from other file inside an HTML page. But... why is this code not working?
<html>
<head></head>
<body>
<p><script>t("title")</script></p>
<script type="module" src="../js/lib/i18n.js"></script>
</body>
</html>
I get the error:
Uncaught ReferenceError: t is not defined
Because you're trying to execute t before it's available on the window, you get an error but running the function through the onload as #Rajesh suggested works properly.
const t = () => {
const pTitle = document.getElementById('pTitle');
if (pTitle){
pTitle.textContent = 'Hello World!';
}
};
//
// Global scope
//
window.t = t;
export {
t
};
<html>
<head></head>
<body onload="t()">
<p id="pTitle"> </p>
<script type="module" src="./src/js/i18n.js"></script>
</body>
</html>

an't access lexical declaration 'myInput' before initialization

In my html file I've got script imports:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module" src="myInput.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
myInput.js has namespace and class defined:
let myinput = module.exports = {};
myinput.MYInput = class {
constructor(params) {...}
myinput.init = (params) => {
return new myinput.MYInput(params)
}
and I'd like to use it in my example.js file:
$(window).ready(function() {
console.log( "ready!" );
let this_input = myinput.MYInput.init({...})
Unfortunately the result is:
Uncaught ReferenceError: module is not defined
<anonymous> http://localhost:63342/myinput/myinput.js:1
myinput.js:1:15
GEThttp://localhost:63342/favicon.ico
[HTTP/1.1 404 Not Found 4ms]
ready! example.js:2:13
jQuery.Deferred exception: can't access lexical declaration 'myinput' before initialization #http://localhost:63342/myinput/example.js:6:19
e#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005
l/</t<#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307
setTimeout handler*l/<#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30516
c#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:28294
fireWith#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:29039
fire#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:29075
c#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:28294
fireWith#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:29039
ready#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:32012
B#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:31791
EventListener.handleEvent*#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:32160
#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:220
#https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:225
undefined jquery.min.js:2:31560
Uncaught ReferenceError: can't access lexical declaration 'myinput' before initialization
<anonymous> http://localhost:63342/myinput/example.js:6
jQuery 13
I've tried importing that file in different ways including required and from... in example.js but nothing was successful. I do suspect there are couple of problems here but I cannot pinpoint them. Could you help?

Import and export issue Javascript (No node.js)

Hello !
I tried using import/exports for the first time, and I have this issue in my code :
The requested module '../Ajout/script.js' does not provide an export named 'flagMap'
I have these files Supprimer.js, containing at the first line :
import{flagMap, findUrl, createUrl,texteValide} from '../Ajout/script.js';
And in Ajout.js contained in another forlder in the parent folder:
var flagMap={/*really long map*/}
function findUrl(isoCode){/*long url finder*/}
function createUrl(svgUrl) {
return `https://upload.wikimedia.org/wikipedia/${svgUrl}`;
}
function texteValide(element){/*text validation for a form*/}
export{flagMap,findUrl,createUrl,texteValide};
/*
other non-exported functions
*/
There is the type="module" in my html when I'm importing the script, and my Ajout.js also contains other functions, maybe it's causing issues ?
Also : The issue is not only flagMap but every import, because it shows another file if I remove flagMap from the imports
This works fine for me:
<!-- index.html -->
<html>
<head> ... </head>
<body>
<script type="module" src="path/to/Supprimer.js"></script>
</body>
</html>
// Ajout.js
var flagMap = {
// ...
};
function findUrl(isoCode) {
// ...
}
function createUrl(svgUrl) {
// ...
}
function textValide(element) {
// ...
}
// Export functions and variables
export {
flagMap,
findUrl,
createUrl,
texteValide
};
// Supprimer.js
import { flagMap, findUrl } from "path/to/Ajouter.js";
console.log(flagMap); // Prints map
findUrl("EN"); // Can call function

Exporting method from another JS file

I cannot import method from another JavaScript file.
I try both exporting single method or class from the file but still does not work. Basically i'm trying to learn Mocha so i try to create library so i can test the methods in Mocha but my exporting and importing dont seem to work. I run the script in Chrome browser.
file: myTest.js
function myTestClass(){
this.myTestText = "Welcome to myTestClass!";
this.mySum = function(a, b) {
return a + b;
}
this.mySubtraction = function(a,b) {
return a - b;
}
this.myMultiply = function(a, b) {
return a * b;
}
};
export default {myTestClass};
file: test.js
import myTestClass from 'myTest.js';
console.log("enter test.js file");
console.log("test.js finished importing myTest.js file");
file: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>Mocha Tests</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></id>
<div id="messages"></div>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<script src="test.js"></script>
<script type="module">
mocha.run();
</script>
</body>
</html>
when I open index.html in Chorme, none of my window.alert() functions get called so from that, the error must have occurred. Please note that all of my files are in the same directory.
You need to use relative referencing which starts with either "/", "./", or "../"
test.js
import myTestClass from './myTest.js';
This also depends if you're importing/exporting on the frontend or in Node. From what I remember, Node doesn't have import/export available so you would need to module.exports/require.
Export:
function myTestClass(){
this.myTestText = "Welcome to myTestClass!";
this.mySum = function(a, b) {
return a + b;
}
this.mySubtraction = function(a,b) {
return a - b;
}
this.myMultiply = function(a, b) {
return a * b;
}
};
export default myTestClass;
Import:
import myTestClass from './myTest.js'; // path to file that contains myTestClass
console.log("enter test.js file");
console.log("test.js finished importing myTest.js file");

Import functions from another js file. Javascript

I have a question about including a file in javascript.
I have a very simple example:
--> index.html
--> models
--> course.js
--> student.js
course.js:
function Course() {
this.id = '';
this.name = '';
}
A student has a course property. like this:
import './course';
function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
}
and the index.html is like:
<html>
<head>
<script src="./models/student.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
window.onload= function() {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
</body>
</html>
But I am getting an error on the line "var x = new Student();":
Student is not defined
When I remove the import from Student, I don't receive the error anymore.
I have tried to use (require, import, include, create a custom function, export) and none has worked for me.
Anybody knows why? and how to fix that?
P.S. the path is correct, it comes from the autocomplete in VS Code
The following works for me in Firefox and Chrome. In Firefox it even works from file:///
models/course.js
export function Course() {
this.id = '';
this.name = '';
};
models/student.js
import { Course } from './course.js';
export function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
};
index.html
<div id="myDiv">
</div>
<script type="module">
import { Student } from './models/student.js';
window.onload = function () {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
You can try as follows:
//------ js/functions.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ js/main.js ------
import { square, diag } from './functions.js';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
You can also import completely:
//------ js/main.js ------
import * as lib from './functions.js';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
Normally we use ./fileName.js for importing own js file/module and fileName.js is used for importing package/library module
When you will include the main.js file to your webpage you must set the type="module" attribute as follows:
<script type="module" src="js/main.js"></script>
For more details please check ES6 modules
By default, scripts can't handle imports like that directly. You're probably getting another error about not being able to get Course or not doing the import.
If you add type="module" to your <script> tag, and change the import to ./course.js (because browsers won't auto-append the .js portion), then the browser will pull down course for you and it'll probably work.
import './course.js';
function Student() {
this.firstName = '';
this.lastName = '';
this.course = new Course();
}
<html>
<head>
<script src="./models/student.js" type="module"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
window.onload= function() {
var x = new Student();
x.course.id = 1;
document.getElementById('myDiv').innerHTML = x.course.id;
}
</script>
</body>
</html>
If you're serving files over file://, it likely won't work. Some IDEs have a way to run a quick sever.
You can also write a quick express server to serve your files (install Node if you don't have it):
//package.json
{
"scripts": { "start": "node server" },
"dependencies": { "express": "latest" }
}
// server/index.js
const express = require('express');
const app = express();
app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');
app.listen(8000);
With those two files, run npm install, then npm start and you'll have a server running over http://localhost:8000 which should point to your files.
//In module.js add below code
export function multiply() {
return 2 * 3;
}
// Consume the module in calc.js
import { multiply } from './modules.js';
const result = multiply();
console.log(`Result: ${result}`);
// Module.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Module</title>
</head>
<body>
<script type="module" src="./calc.js"></script>
</body>
</html>
Its a design pattern same code can be found below, please use a live server to test it else you will get CORS error
https://github.com/rohan12patil/JSDesignPatterns/tree/master/Structural%20Patterns/module

Categories