How to fix babel react "Uncaught SyntaxError: Unexpected token <"

Question

I am having problem with react setup via CDN.

Her is my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
    <script src="js/app.js"></script>

</head>
<body>
    <div id="container">
    </div>
</body>
</html>

and here my app.js:

var myItems = {
    items:
        ["Widget","Gear","Sprocket","Spring","Crank","Lever","Hose","Tube",
            "Wheel","Housing","Case"]
}

var FilteredList = React.createClass({

    filterList: function (event) {
        var updatedList = this.props.initialItems.items;

        updatedList = updatedList.filter(function (item) {
            return item.toLowerCase().search(event.target.value.toLowerCase()) !== 1;
        });

        this.setState({items: updatedList});
    },

    getInitialState: function(){
        return {
            items: []
        }
    },

    componentWillMount: function(){
        this.setState({items: this.props.initialItems.items})
    },

    render: function(){
        return (
            <div className="myList">
                <input type="text" placeholder="Search" onChange={this.filterList} />

                <List items={this.state.items}/>

            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.items.map(function (item) {
                        return <li key={item}>{item}</li>;
                    })
                }
            </ul>
        );
    }
});

ReactDOM.render(<FilteredList initialItems={myItems} />,
    document.getElementById('container'));

When run it I get the following error:

app.js:31 Uncaught SyntaxError: Unexpected token <

Any idea how to fix it?

How have you integrated babel with your app. are you using webpack or gulp as a builder. i think it is the problem with your jsx conversion. — Rafi Ud Daula Refat
– Rafi Ud Daula Refat, Commented Jun 19, 2016 at 7:55

Joe Clay · Accepted Answer · 2016-06-20 15:38:07Z

20

Even though you have added babel-standalone to your page, you still need to tell it to transpile your app.js file.

You do it by adding type="text/babel" to your script tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js">    </script>
    <script type="text/babel" src="js/app.js"></script>

</head>
<body>
    <div id="container">
    </div>
</body>
</html>

Just for reference you can also transpile your code inline with:

Babel.transform(input, { presets: ['es2015'] }).code;

edited Jun 20, 2016 at 15:38

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

answered Jun 19, 2016 at 8:18

omerts

8,8782 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

turbogeek Over a year ago

First, thanks for your answer (uppvoted!). Can you explain why this works and why the build ends up creating such a bad result?

omerts Over a year ago

The browser doesn't know how to parse JSX. Babel is responsible for transformin JSX into something the browser can understand. Without adding type="text/babel" to the script tag, babel doesn't transform the code within the script, and therefore the JSX code stays as is, and the browser throws an error. Behind the scenes Babel transforms JSX into React.createElement calls. You can try it out here: babeljs.io/repl

Asqan Over a year ago

It works. However, I'm not sure how to distribute it like this using npm.

Collectives™ on Stack Overflow

How to fix babel react "Uncaught SyntaxError: Unexpected token <"

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related