I'm trying to clean up my code and implement es6 modules for the first time. I have created three module files and am using the import/export keyword where necessary and have specified type="module" in index.html.
The problem is everything functions correctly except all the global variables are undefined in my main file and now I get Reference Errors: Variable not defined if I try to console.log(variable)in the console. Confusing me further is if I place the same console.log(variable) inside an IIFE within the file it correctly displays the variable value with no Reference Error.
For example:
<script type="module">
let foo = "some text";
(function() {
console.log(foo)
}()); // prints "some text"
console.log(foo); // prints Reference Error: foo not defined
</script>
Are there special rules for how global variables are handled in es6 modules? I'm just really confused because the everything else works properly and all I changed was splitting my file using es6 modules and running a local server (because of CORS error from using module pattern).
It appears my issue was a misunderstanding of how the console works and that it doesn't have access to a variable within a module file unless it is made global by attaching it to window.
For example, this now allows me to access the variable in question:
let foo = "some text";
window.foo = foo;
console.log(foo); // now prints "some text" in the console instead of Reference Error
Related answers:
How to access functions defined in es6 module in a browsers javascript console
What is the correct way to define global variable in ES6 modules?
Related
Is it possible to use a global variable in the same file that it is declared?
The following code does not throw a compiletime error:
declare global {
const something = "something goes here";
}
export default {
somethingElse: something + " else"
}
However, it seems to be causing an 'undefined variable' error in the same file and every other file I use it in.
TypeScript's declare syntax is used to declare variables that already exist globally in the context of a module. For instance, in a web application where variables might be coming from <script> tags that TypeScript isn't aware of, said variables and their types can be declared so that their use can be type checked.
Therefore, TypeScript wouldn't warn you about something being undefined, as it expects the variable to already have been declared elsewhere, and your declare global {} block to be informing it of said declaration.
This question already has answers here:
How to check a not-defined variable in JavaScript
(15 answers)
Closed 3 years ago.
So I'm trying to swap between API links in my angular app based on the origin, but it is an SSR app so I'm trying to account for an environment variable as well as window location, the code is as follows:
const getApiUrl = (): string => {
if (process && process.env?.AZURE_ENV === 'development') {
return 'devlink for SSR';
} else if (
window &&
window.location.origin === 'devclient'
) {
return 'devlink for frontendclient';
} else {
return 'link.com/';
}
};
Now the error being thrown out is:
Uncaught ReferenceError: process is not defined
I've digged into the 'compiled' script and have 100% confirmed it's coming from this piece of code.
Shouldn't this still work though?
I've also tried a vesion where I just have if(process) and get the exact same result as above.
Probably it is not there so it will fail to evaluate, maybe testing it like typeof process !== 'undefined' will help
If process has never been defined in any accessible context I think it will fail with an UncaughtReferenceError because it is trying to access something not in the context. Undefined means that the variable exists but it has no value set and this error says that the variable is just not there, thats why checkinng the type of it will probably solve the issue.
Nope. While a non-exising field of an object is really undefined, read access to a non-existing variable is an error in JavaScript, use typeof as other answers suggest...
console.log("typeof {}.process",typeof {}.process);
console.log("typeof process",typeof process);
console.log("{}.process",{}.process);
console.log("process",process);
... also, your code is TypeScript, the :string part gives it away. Which means it is compiled to strict mode, and even write access to a non-existing non-local variable would be an error.
I'm not very familiar with angular. But typically this is supposed to be client side code and it doesn't have access to node environment variables. Even if it is SSR.
If you are using webpack you could define the environment variable as a global variable on the client side:
https://webpack.js.org/plugins/define-plugin/
For your case if you don't want to use any other solutions, firstly check global , its like window but on node, so process will be stored in global.process
I happened to name a variable the same as a function in Node.js. This did not go very well, Node 10 did not like it. And since this was a hook function (not called from the UI of the app) it took some time before I discovered what went wrong.
Is there some ESLint rule that can discover these type of bugs? This is under Firebase and and ESLint is run during the deploy to production server.
The actual conflicting use of the variable name was in the same block, something like this: const a = a(x).
I don't think a tool like this could exist for JavaScript, as JavaScript doesn't really disambiguate the type of object assigned to the variable.
function a() {
}
... is basically equivalent to:
var a = function () {
};
Additionally, the value of a in this example can be reassigned later.
A linter may help you, and there may be some help in some IDEs, but they won't truly know the intention of the programmer.
There is a no-redeclare rule you can set in ESLint, which tells you the problematic line in your code.
/*eslint no-redeclare: "error"*/
function a() {}
const a = a();
=> 4:5 error 'a' is already defined no-redeclare
Also ESLint will raises an error with the standard configuration.
function a() {}
var a = a();
=> 4:5 error Parsing error: Identifier 'a' has already been declared
Of course, with const, you will get a syntax error with the line as well if you try to run your script.
I have this line of code in my html
<a href="#" onclick="editfuntion(2)">
And My Coffescript
editfunction = (id) ->
console.log id
return
Why is it it returns ?
Uncaught ReferenceError: editfunction is not defined
at HTMLAnchorElement.onclick
Coffeescript will wrap all files in an anonymous function which is immediately executed. This means all variables you define are locally scoped unless explicitly placed in the global namespace (in browsers it is the window object, while in NodeJS it's global).
From coffeescript.org (talking about using Coffeescript in a browser, but it also applies to using the Coffeescript compiled to JS ):
The usual caveats about CoffeeScript apply — your inline scripts will run within a closure wrapper, so if you want to expose global variables or functions, attach them to the window object.
Try changing your Coffeescript to:
window.editfunction = (id) ->
console.log id
This will expose the function globally on the window object so that it can be used within an onclick handler.
#editfunction = editfunction = (id) ->
console.log 'Yeheyyy'
this will works :)
I'm using a global variable in javascript, declared in a script tag outside any function:
<script type="text/javascript">
var prov_status_dict={};
....
</script>
Later on in a javascript method I'm using the variable normally.
temp=prov_status_dict[current_as_id];
I'm having issues with it on opera and ie, while on firefox it works. This is what opera's error console reports:
JavaScript - http://localhost:8000/input/
Event thread: click
Error:
name: ReferenceError
message: Statement on line 62: Undefined variable: prov_status_dict
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace
I've noticed that the problem is with global variables in general. I tryed moving some into hidden fields, but the same error pops up on the next use of a global var.
Help?
I usually access my globals through the window object so that I always have a point of reference
window.MyVariables = {};
window.MyVariables.prov_status_dict = {};
Give this a try, it might resolve your problem.
Try to avoid using global variables, see http://yuiblog.com/blog/2006/06/01/global-domination