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
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 need a pure javascript plugin that works with IE 9+ to highlight a given regex expression. I found Mark.js and I managed to make it work, but not with the file recommended in the docs that is inside the /dist/ folder.
I've tried with both 8.9.1 and 8.10.0 versions. Download here
How it worked
1 - Added the javascript library in the header tag. Note that this file is inside the src folder, not like recommended in the docs.
<script type="text/javascript" src="src/mark.js" charset="UTF-8"></script>
2 - So, in the chrome developer tools console I've typed:
new Mark(document.querySelector("#div"));
that works and give me this output:
Mark {ctx: null, ie: false}
How it didn't work
1 - Added the javascript library in the header tag. Note that this file is inside the dist folder, like is said in the docs. I've tried with both "mark.es6.js" and "mark.js", but what I really want to be working is the ES5 version.
<script type="text/javascript" src="dist/mark.js" charset="UTF-8"></script>
2 - So, in the chrome developer tools console I've typed:
new Mark(document.querySelector("#div"));
this didn't work and give me this output:
Uncaught ReferenceError: Mark is not defined
at <anonymous>:1:1
So I followed some tutorials for uploading files asynchronously. The project runs fine for Mozilla Firefox and Chrome, but when i run it in Internet Explorer 9 it gives an error:
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'length': object is null or undefined
here is where it shows the error:
<script type="text/javascript">
$(document).ready(function () {
$("#btnUpload").click(OnUpload);
});
function OnUpload(evt) {
var files = $("#fileUpload").get(0).files;
if (files.length > 0) { <---//Error
...
I have already tried some fixes e.g adding this to the head tag
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" >
This doesn't work for me.
So help would be greatly appreciated.
You haven't specified what jQuery plugin you're using for the file upload, but my guess is that it's one which is using a browser feature (File API) that isn't available in older browsers like IE9.
There are ways of uploading files using old browsers; if you want to support IE9, you'll have to use one of the older techniques.
You might want to look at some of the libraries listed here -- this is a list of "Polyfill" libraries which claim to allow some degree of compatibility for this new feature in older browsers. I can't guarantee that any of them will work nicely with your existing jQuery plugin, but they should at least give you a starting point for getting the feature working.
I just started using netbeans (NetBeans IDE 7.2 (Build 201207171143) under Win7/64bit) to try out jQuery developement. Especially the autocompletion seemed very handy..
I used this tutorial: http://netbeans.org/kb/docs/web/js-toolkits-jquery.html
I did everything like in this tutorial but took the current version of jQuery.js (v1.8.0) instead of the older 1.4.2-revision.
Lets look at the following code snipped:
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){ alert ("HI!"); });
});
</script>
The autocompletion works for "$(document)." and suggests "ready". So far, so good...
The 3rd line starts with "$("h1")." after that selector followed by "." I get a lot of suggestions but not for "click"; When I use the older jQuery-1.4.2.js it works as seen in the following screenshot of the tutorial: http://netbeans.org/images_www/articles/69/web/js-toolkits-jquery/code-completion.png
Questions:
What's actually the problem here?
Can we somehow get this working with the current version of jQuery? If so: How?
Who's potentially in charge here ... bug in jQuery or netbeans?
Regards,
Stefan
--- update ---
The problem only occurs if you add a <script type="text/javascript" src="js/jquery.js"></script> to the source code. If you omit the include, it's working as it should.
So this seems to be an issue of Netbeans. And lead us to the following adapted question:
Question: Not including the jquery.js is just a workaround. Is there a way to fix that? Maybe it's needed that we disable some "auto-include-everything" option somewhere in the project?
--- update #2 : SOLUTION ---
It's even the name of the included script <script type="text/javascript" src="jq.js"></script> works, but any resource name ending in 'jquery.js' don't work, whereas <script type="text/javascript" src="jquery-1.8.0.js"></script> worked!
So it's actually a kind of bug in Netbeans, that is caused by some hardcoded stuff. And the solution is to rename the JavaScript file in a way that it e.g. still includes the revision.
Looks like you're using a minified version of jQuery, because you're likely getting code completition from JS core, so you need to include in your project the development version or both (development and minified), if you're pushing code to production, to get jQuery code completition and API especifications. Watch this:
One possible problem might be that click() has been depreciated in favor of on() Of course click() without parameters is still used to fire the event, so I'm probably wrong but see if this autocompletes correctly:
$("h1").on("click",function(){ alert ("HI!"); });
Note: on() was introduced in version 1.7
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..