2

Does reactjs works fine with IE8? I am using React v0.11.1.

Following code is NOT working in IE8. Works fine on all the other browsers

SCRIPT438: Object doesn't support property or method 'isArray' File: react.js, Line: 17372, Column: 37 SCRIPT5009: 'React' is undefined File: myreact.js, Line: 3, Column: 1 SCRIPT438: Object doesn't support property or method 'map' File: JSXTransformer.js, Line: 12637, Column: 3

/** @jsx React.DOM */

var MyComponent = React.createClass({displayName: 'MyComponent',

    getDefaultProps:function(){

            return{

                text:"",
                numbers:0
            }

    },

    getInitialState:function(){


        return {txt:"initial", id:0}
    },

    updateText: function(event){

        this.setState({text:event.target.value})
    },

    propTypes:{

        text:React.PropTypes.string,

        numbers: React.PropTypes.number.isRequired
    },



    render:function(){

        return (
                    React.DOM.div(null, 
                        Widget({text: this.state.text, update: this.updateText}), 
                        Widget({text: this.state.text, update: this.updateText})
                    )
            )
    }

});

var Widget = React.createClass({displayName: 'Widget', render:function(){

        return(
                React.DOM.div(null, 
                React.DOM.input({type: "text", onChange: this.props.update}), 
                React.DOM.div(null, this.props.text)

            )
            )
    }

});

React.renderComponent(
    MyComponent({text: "HI there", numbers: 34}), 
        document.getElementById("content")
    );
rishinarang
  • 31
  • 1
  • 5
  • 4
    possible duplicate of [Why is IE8 getting a script error when using Facebook's React.js](http://stackoverflow.com/questions/19259427/why-is-ie8-getting-a-script-error-when-using-facebooks-react-js) – chiccodoro Sep 26 '14 at 08:00
  • http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills – David Hellsing Sep 26 '14 at 10:49
  • thanks for your comments, I included es5Shim.js and es5Sham.js. It works fine now. – rishinarang Sep 26 '14 at 11:39
  • 1
    I've collected some issues that might broke IE8, please check it if you need to make your React app work in IE8 https://github.com/xcatliu/react-ie8 – xcatliu Apr 25 '16 at 12:32

2 Answers2

4

You need to use the following shims/pollyfills as noted in the react docs. es5-shim will resolve the specific isArray bug you are seeing.

Christo
  • 2,330
  • 3
  • 24
  • 37
0

I've managed to launch my React app in IE8 using the following code:

App.js:

require('core-js'); //Important!
var React = require('react');
var ReactDOM = require('react-dom');
var Application = React.createClass({ ... });
ReactDOM.render(React.createElement(Application,null), document.getElementById("app-container"));


index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
    <script type="text/javascript" src="bundle.js" defer></script>
</head>
<body>
<div id="app-container"></div>
</body>
</html>


Comments: bundle.js will be loaded after es5-shim/es5-sham because of defer html attribute

Ildar Zaripov
  • 491
  • 7
  • 15