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.
Related
I am learning JavaScript and I am using Atom (Text Editor).
On my HTML file I got only this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id="displayTodosButton">Display Todos</button>
<button>Toggle Todos</button>
</body>
</html>
On my javascript file, I am simply trying to access the "Display todos" button using this:
var displayTodosButton = document.getElementById('displayTodosButton')
I was watching a video, and the instructor is using plnkr.co, and he accesses the button just fine, yet on Atom I get the "ReferenceError: document is not defined"
How can I fix this?
yet on Atom I get
If you really mean that Atom, your text editor, is highlighting it and showing you a warning that document is undefined, it's just that Atom doesn't realize you're running that code in a browser context where document will be defined.
It probably has a setting where you can tell it that you'll be running the code in a browser, so it can assume the default set of globals (window, document, etc.).
If the code in script.js is just what you've shown, although the error Atom is showing you won't be a problem (because in the browser, document will not be undefined), you'll get null back from getElementById because your code runs before the element exists. Again, this is assuming that code is on its own, not (say) inside a DOMContentLoaded handler or similar.
Unless you have a good reason to do it (and there aren't many), putting script elements in the head is an anti-pattern. Put them in body, right at the end, just prior to the closing </body> tag. That way, any elements defined above them will have been created by the browser before your code runs.
You have hit some menu option or key combination which is trying to execute the JS file using Node.js.
Your code, however, is designed to run, embedded in a web page, using the APIs supplied by web browsers.
Web browsers, under those circumstances, will provide a document object. Node.js will not.
You need to open the HTML document in a web browser. The open in browser extension might be useful.
You can see any error reports using the Developer Tools that every major browser supplies.
(NB: The first error you will then encounter is explained by this question and answer).
It looks like you are trying to run the JS code with the "script" package in atom (which is in a NodeJS context). What you actually want to do, is to run it in your web browser. So just open index.html in your favorite browser and see the magic :)
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
for some reason when i try to load jquery via cdn, it works perfectly
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
however, when i try to load it using the local files, it does not work
script type="text/javascript" src="javascripts/jquery-1.11.2.min.js"
and displays this error:
Uncaught SyntaxError: Unexpected token < jquery-1.11.2.min.js:1
i must say that my server is running on node.js
it seems you have syntax error with your tag.
try this.
<script type="text/javascript" src="javascripts/jquery-1.11.2.min.js"></script>
It seems as though there is an error occurring inside jquery-1.11.2.min.js. Not in the document which contains the script tag. So, the question is: why does your local copy of jquery-1.11.2.min.js contain a <? The answer is that it most likely doesn't. The request for jquery-1.11.2.min.js is probably resulting in a HTML response, which the browser attempts to load as JavaScript, and fails on the first character. Ensure that javascripts/jquery-1.11.2.min.js is the correct path to your JavaScript file.
It can be shown that this is the case because a SyntaxError is a JavaScript error. MDN says the following (emphasis mine):
A SyntaxError is thrown when the JavaScript engine encounters tokens or token order that does not conform to the syntax of the language when parsing code.
So, the error is being thrown by the JavaScript engine, which means that the browser is actually trying to load a script file. As you can see from the error message, the error is thrown at jquery-1.11.2.min.js:1, which is line one of jquery-1.11.2.min.js. You can reproduce the same error message using the following code saved in a file named foo.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foo.html"></script>
</head>
<body></body>
</html>
Alternatively, you can view a demonstration of equivalent code here (check your console).
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>
I am getting the following error:
Microsoft JScript runtime error: 'Sys'
is undefined
While trying to execute:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//ERROR IN THIS LINE!!!
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onUpdated());
function onUpdated() {
// get the update progress div
var pnlPopup = $get("div2");
// make it invisible
}
</script>
</head>
Ensure you have a Scriptmanager on the page and the script is below the scriptmanager. Maybe try to put your script tag into body and see what happens.
I don't know how you can fix that that its not in the body, but maybe there is a callback from Sys when its loaded
You don't need brackets to tell which function is neeeded:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onUpdated);
If that is your full code, then the problem is that the Microsoft AJAX libraries aren't being included. If it isn't your full code, then you need to post more as it's a little hard to get beyond the fact that the library isn't included. Somewhere in your file -- prior to the line you are having problems with you need to have a javascript include like:
<script type="text/javascript" src="/scripts/MicrosoftAjax.js" />
As well as probably a few others.
Note: I'm talking about the generated source. Showing more complete markup would probably also suffice.
I'm a bit late to the discussion here, but a simple solution is to create a "ASP.NET AJAX-Enabled Web Site" in Visual Studio and then merge the web.config from that site with your existing site.
In this way you get all the configuration you need without having to carefully read through a lot of docs. Speed is of the essence and all that :)
You can fix this issue by setting the EnableCDN property to "true".refer this link
I had the same issue , after all findings I found that the required script files ("MicrosoftAjax.js", "WebForms.js","jquery", "bootstrap" etc..) were not loaded properly which was causing me 3 errors "Sys' is undefined", "webform_docallback is undefined" and "webform_initcallback' is undefined", my actual problem was I had reference to these files which where not included in my propject, my bad I have not noticed it, I have tried all the possible solutions from the internet before I really found that my js files were not included and thats the reason its not loaded properly.
Hope this helps..