Menu
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>
299
That's why the application not run properly on IE. The solution is to use polyfill to make your existing code backward compatible. A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
React 18 supports all modern browsers (Edge, Firefox, Chrome, Safari, etc). If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
React supports all modern browsers, although some polyfills are required for older versions. We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer.
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
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
