When I try to run my app with node-webkit I have error: Node-webkit: ReferenceError: _ is not defined. I think it is about Lo-dash, but on browser everything work fine. Here is my index.html code:
<!DOCTYPE html>
<html ng-app="viewer">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="components.min.js"></script>
<script src="app.min.js"></script>
</head>
<body>
<div id="content"></div>
<div ui-view></div>
</body>
</html>
In components.min.js i have all components I need - lodash, angular etc. When I run it by browsers or appJS i haven't any error, only on node-webkit.
Quite usually these reference errors arise when some script tries to reference another script which isn't loaded yet. Basically, the order in which you register your script matters. Script that is referenced should be registered before the script that uses it.
A good explanation of this issue (although with JQuery's $ selectors instead of the lodash _), is in this article here: http://jquery-howto.blogspot.nl/2013/02/referenceerror-jquery-is-not-defined.html.
Thus I would check the order in which your .js files are registered and their dependencies.
This is an issue with Lo-dash. The current edge version seems to have a fix for it, see this thread
A quick solutions seems to be to replace <script src="path_to_lodash.js"></script> with <script>require('lodash')</script>
Related
I need to refactor some JavaScript code and am trying to implement ES6 modules using the native import/export commands. I struggled for awhile to get this working, so I am going to document what needed done here for future reference.
The symptom is that I receive the following message in the Chrome console:
Uncaught SyntaxError: Unexpected token import
My basic code for testing is:
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="application/javascript" src="./import.js"></script>
</html>
import.js:
import { apath } from './alert_path';
alert_path.js:
export function apath() {
alert('Bang!!!');
}
There were two actions I had to take to resolve this problem.
First, Chrome must be at 61+ or chrome://flags must enable Experimental Web Platform features.
Second, the script tag must use type module:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="module" src="./import.js"></script>
</html>
I found the second answer here under What are the basics?
Modules must be eventually included in your HTML with type="module",
which can appear as an inline or external script tag.
OBTW, the sample will fail due to CORS violations after this is resolved unless it is run through a server but that is another question.
I'm trying to use React with Internet Explorer 9 but getting the following errors even trying to run something very barebones:
SCRIPT438: Object doesn't support property or method 'isArray'
react-with-addons.js, line 4 character 317
SCRIPT438: Object doesn't support property or method 'create'
JSXTransformer.js, line 4 character 326
I've read https://facebook.github.io/react/docs/working-with-the-browser.html, which says IE8 might have these issues, but no mention about IE9. Googling didn't really bring up any solutions either.
Still, I tried adding es5-shim/sham as suggested on that page. That results in a different error:
SCRIPT438: Object doesn't support property or method 'hasAttribute'
es5-shim.min.js, line 6 character 4143
Has anyone encountered these errors before in IE9 or otherwise?
Thanks for the help!
The full code I'm trying to run is:
<html>
<head>
<script src="js/es5-shim.min.js"></script>
<script src="js/es5-sham.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/react-with-addons.js"></script>
<script src="js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
React.render(
<h1>HELLO WORLD!</h1>
);
</script>
</body>
</html>
Generally, you need to include the specified polyfills for ES5 features (as you've noticed): https://facebook.github.io/react/docs/react-dom.html#browser-support
You may also need HTML5 Shiv in addition to the the polyfills you've provided.
More specifically, though, the problem is probably not with polyfills but with the document mode IE9 is running in. You want to make sure that you are setting the correct document mode in your HTML file so IE knows which version to target. Otherwise, even though you are using IE9 it may be targeting IE7 which is no good.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
In index.js file you have to add polyfill. These imports should be in the first of your import.
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
//other imports
Now open in ur ie it works.
Before import you have to install react-app-polyfill.
//To install use below command:
npm install react-app-polyfill
link reference:
https://www.npmjs.com/package/react-app-polyfill
I'm using Notepad++ to write a simple JavaScript program. I tried to run it with Firefox but the page was blank. I saved it as a HTML file but still nothing. Where am I going wrong?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Exercise 1 </title>
</head>
<body>
<script type = “text/javascript”>
var myName = "type your name!!";
document.write("Hello World");
</script>
</body>
</html>
These look like left quote/right quote characters:
<script type = “text/javascript”>
^ ^
They should be regular double-quote characters <script type="text/javascript">, or you can leave them out entirely, as all browsers default to using Javascript:
<script>
</script>
Additionally, it is not recommended to use document.write any longer. You should use some of the DOM manipulation methods available instead.
As pointed out you are using the wrong type of quotes. Note that you can download jshint for notepad++ which can be very useful as it catches these types of bugs before you run. At the time of writing this answer, you can get it from sourceforge here. It includes jslint and jshint.
JSHint is a community-driven tool to detect errors and potential
problems in JavaScript code and to enforce your team's coding
conventions. It is very flexible so you can easily adjust it to your
particular coding guidelines and the environment you expect your code
to execute in.
I'm working with the nokia here api and I'm trying to create an advanced routing manager in javascript which for some reason does not work. Clearly I'm missing something but I just can't find it.
Basically that's all I'm doing:
<head>
<title>isoscope</title>
<meta charset="utf-8">
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
nokia.Settings.set("appId", "xxxx");
nokia.Settings.set("authenticationToken", "xxxx");
var routingManager = new nokia.maps.advrouting.Manager();
</script>
</head>
And all I get is:
Uncaught TypeError: Cannot read property 'Manager' of undefined
It could have something to do with the Enterprise API vs the regular API because creating instances of e.g. a map works fine. But since I have access to the Enterprise API this shouldn't be any issue.
Ok for reasons of closure and completeness here's my solution to my problem as a regular answer.
Obviously the script I was including (I copied the URL from the isoline example on this page was just the wrong one. The correct one (or at least the one that works for me) can be found here.
It's
http://js.api.here.com/ee/2.5.3/jsl.js?with=all
I've checked out the Closure library as instructred, but can't find a way to use the library (i.e. goog.require('math') inside the Console just for trying it out and testing purposes.
Thanks in advance.
Once Closure Library's base.js is loaded, you can reference the library in the Chrome Dev Tools console.
closure-test.html (load base.js)
<!doctype html>
<html>
<head>
<title>Closure Library Test</title>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
</head>
<body>
<h1>Closure Library Test</h1>
</body>
</html>
Chrome Dev Tools Console
> goog.require('goog.math');
<* undefined
Observing Resources | Frames | (closure-test.html) | Scripts, math.js will be loaded.
> goog.math.modulo(-1, 8);
<* 7