ReactJS doesn't render in IE11

Question

My site works flawlessly in web browsers, but IE11 shows this error in console.

What should I do with this?

React.render(
    <NewsFeed tagFilter={tagFilter}/>,
    document.getElementById('newsFeed')
);

'NewsFeed' is undefined

EDIT: Here is the newsfeed (.js JSX file, included in page's header)

var Article = React.createClass({
    askDelete: function(id,title) {
        if (confirm("Delete the '"+title+"'?")) {
            $.ajax({
                url: "/-----removed----/"+id,
                type: "DELETE",
                async: false,
                cache: false,
                dataType: 'json'
            });
            location.reload();
        }
    },
    handleClick: function(id) {
        React.unmountComponentAtNode(document.getElementById('editor'));

        React.render(
                <PostEditor
                    postId={id}
                />,
                document.getElementById('editor')
            );
        functAdmin.showEditor();
    },
    render: function() {
        var editIcon=[];
        var boundClick = this.handleClick.bind(this, this.props.id);
        var boundDeleteClick = this.askDelete.bind(this, this.props.id,this.props.title);
        editIcon.push(<span className="adminActionsNewsfeed" key={"editIcon"+this.props.id}><i className="pointer gray fa fa-edit" onClick={boundClick}></i><i className="pointer fa fa-remove red" onClick={boundDeleteClick} key={"deleteNewsIcon"+this.props.id}></i></span>);
        var tags=[];
        if (typeof this.props.tags != 'undefined') {
            var tagArray=this.props.tags.split(",");
            for(tag of tagArray){
                tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
            }
        }
        return (
            <div className="article" key={"newsArticle"+this.props.id}>
                {editIcon}
                <span className="articleTitle">
                    {this.props.title}
                </span>
                <span className="articleTime">
                    {funct.formatDate(this.props.time)}
                </span>
                <div className="articleBody">
                    {this.props.children}
                </div>
                <div className="tagLine">{tags}</div>
            </div>
        );
    }
});

var ArticleList = React.createClass({
    render: function() {
        this.props.data.sort(funct.SortByTime);
        var postNodes = this.props.data.map(function (item) {
            var tags = item.news_tags.toLowerCase().split(",");
            if ((tagFilter=="") || (tags.indexOf(tagFilter) > -1)) {
                return (
                    <Article
                        key={"news"+item.news_id}
                        title={item.news_title}
                        tags={item.news_tags}
                        time={item.news_time}
                        id={item.news_id}
                    >
                    {item.news_body}
                    </Article>
                );
            }
        });
        return (
            <span>
                {postNodes}
            </span>
        );
    }
});

var NewsFeed = React.createClass({
    launchAdd: function() {
        React.unmountComponentAtNode(document.getElementById('editor'));
        React.render(
                <PostEditor
                    postId={""}
                />,
                document.getElementById('editor')
            );
        functAdmin.showEditor();
    },
    getInitialState: function() {
        return {data: []};
    },
    refreshPostStatus: function() {
        $.ajax({
            url: "/-----removed----",
            type: "GET",
            cache: false,
            dataType: 'json',
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.log( xhr.responseText);
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function() {
        this.refreshPostStatus();
    },
    render: function() {
        var addIcon=[];
        addIcon.push(<div className="addPostLine"><i className={funct.statusIcon[5]+" fa-2x"} onClick={this.launchAdd} />Add new post</div>);
        return (
            <span>
                <i className="fa fa-file fa-lg blue"></i>
                {addIcon}
                <h1>Netbiter funct System Information</h1>
                <ArticleList data={this.state.data}/>
            </span>
        );
    }
});

Was the `NewsFeed` class loaded successfully before it was used in your code? The class needs to be loaded before it is used. You should be able to confirm using Network tab do rev tools. Then, set a breakpoint if that works. Is everything in the right sequence? — WiredPrairie, Feb 27 '15 at 11:49
It seems than newsfeed.js has an error, it fails with "SyntaxError: missing ; after for-loop initializer" when I run it through JSLint, it show it for the line: for(tag of tagArray){ - IE complained about missing ; , so at least I found the reason. But I can't figure out how to fix it. I will try different looping algorithm. — Kokesh, Feb 27 '15 at 12:05
I guess not, I'm running on the JSX runtime transformer for now. I found what was wrong, see me answer below. — Kokesh, Feb 27 '15 at 14:58

score 2 · Accepted Answer · answered Feb 27 '15 at 12:35

2

Solved it. IE11 didn't like this part of newsfeed.js:

for(tag of tagArray){
                tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
            }

It works after replacing it with this:

for(var i in tagArray){
    var tag=tagArray[i];
    tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
}

answered Feb 27 '15 at 12:35

Kokesh

3,165
7
29
46

4

why not `tags = tagArray.map(function(tag, index) {return });` – Perfection May 13 '16 at 13:45

score 0 · Answer 2 · answered Mar 20 '18 at 16:22

0

just import 'core-js/es6/' to your index.js or main entry file

import 'core-js/es6/';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

answered Mar 20 '18 at 16:22

Saurabh Joshi

267
5
11

ReactJS doesn't render in IE11

2 Answers2