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?
Related
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
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>
I am using modern Javascript MyClass.js
export default class MyClass {
constructor(x) {
this.val=x? x: "Hello!"
console.log("MyClass:",x)
}
}
at my http://localhost/myfolder/mypage.htm, with the source below,
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
<script type="module" src="./MyClass.js"></script>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function(){
alert(123)
let x = new MyClass(11);
}, false); //ONLOAD
</script>
</head>
<body> <p>Hello1!</p> </body>
</html>
Why console say "Uncaught ReferenceError: MyClass is not defined"?
PS: this question is a complement for this other about using ES6+ with browser+NodeJs.
NOTE: using UBUNTU ith Apache's Localhost... Some problem with myfolder a symbolic link to real folder? at /var/www/html I used ln -s /home/user/myRealFolder/site myfolder
you need to import the module before using it
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<script type="module" src="./MyClass.js"></script>
<script type="module" id="m1">
// script module is an "island", not need onload.
'use strict';
import MyClass from './MyClass.js';
let x = new MyClass(11); // we can use here...
console.log("debug m1:", x) // working fine!
window.MyClassRef = MyClass; // "globalizing" class
window.xRef = x // "globalizing" instance
</script>
<script> // NON-module global script
document.addEventListener('DOMContentLoaded',function(){
// only works after all modules loaded:
console.log("debug:", window.xRef) // working fine!
let x = new window.MyClassRef(22); // using class also here,
console.log("debug:", x) // working fine!
}, false); //ONLOAD
</script>
</head>
<body> <p>Hello1!</p> </body>
</html>
There are two ways to use an imported class:
at module scope (script m1): you can use new MyClass(), and can "globalize" instances (e.g. xRef) or the costructor's class (MyClassRef).
at global scope: to work together other libraries or with main script, use a global reference, e.g. new window.MyClassRef().
All this solution relies upon "static import"...
Optional dynamic import
You can use also import with ordinary default <script> (no type="module"), and no "onload", using this solution, instead the last script:
<script>
'use strict';
import('./MyClass.js').then(({default: MyClass}) => {
alert(123) // async block
let x = new MyClass(11);
});
</script>
See dynamic import.
I'm trying to run p5 inside an IIFE but getting this error:
Uncaught TypeError: Cannot read property 'className' of undefined
It doesn't show up without IIFE.
sketch.js
var sketch = (function(p5) {
setup = function() {
p5.createCanvas(p5.windowWidth, p5.windowHeight);
p5.background(0);
};
}(new p5(sketch, "canvas")));
index.html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="main.js"></script>
<div id = "canvas"></div>
</body>
</html>
Your syntax is a little weird. Why are you wrapping both the function and the call to new p5() in parenthesis? Also, you're missing a variable name for the setup() function definition.
Correcting all of that would look like this:
var sketch = function(p5) {
p5.setup = function() {
p5.createCanvas(p5.windowWidth, p5.windowHeight);
p5.background(0);
};
}
new p5(sketch, "canvas");
I also would not use p5 as a variable or parameter name since that's the name of the overall p5.js library, so I'd do something like this:
var s = function(sketch) {
sketch.setup = function() {
sketch.createCanvas(sketch.windowWidth, sketch.windowHeight);
sketch.background(0);
};
}
new p5(s, "canvas");
More info can be found in the p5.js GitHub wiki.
I am building a phonegap app which has a cors.js with the following code:
describe('cors', function () {
it('passes control to next middleware', function (done) {
// arrange
var req, res, next;
req = fakeRequest();
res = fakeResponse();
next = function () {
done();
};
The error I am getting is:
Uncaught ReferenceError: describe is not defined
Where do I set the reference to describe?
When I had this problem, i solved it by switching the order of the libraries.
<script src="/bower_components/angular/angular.min.js"></script>
...
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
... then the tests e.g.
<script src="/js/lib/sync/test/local-test.js"></script>
Also I import all of them at the end of the <body>.