Unexpected Token but not sure as to why

Question

I'm not sure why I am getting an Unexpected Token error. I can't seem to see the error. Unless

Line 41 is: }.bind(this), right after this.setState

ERROR in ./app/views/components/navbar.js
Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/components/navbar.js: Unexpected token (41:4)
                console.log(response);
                this.setState({logoPath: response});
            }.bind(this),
            error: (xhr, status, err) => {
                console.error(this.props.url, status, err.toString());
            }.bind(this),
    at Parser.pp.raise (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2817:8)
    at Parser.pp.expect (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2811:33)
    at Parser.pp.parseObj (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:937:12)
    at Parser.pp.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:718:19)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4305:22)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExprListItem (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1206:16)
    at Parser.parseExprListItem (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3692:24)
    at Parser.pp.parseCallExpressionArguments (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:580:20)
    at Parser.pp.parseSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:543:29)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:514:15)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:324:19)
    at Parser.pp.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1874:19)
    at Parser.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3507:22)
    at Parser.pp.parseBlockBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2208:21)
    at Parser.pp.parseBlock (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2189:8)
    at Parser.pp.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1125:22)
    at Parser.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3494:20)
    at Parser.pp.parseMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1094:8)
    at Parser.parseClassMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3735:12)
    at Parser.pp.parseClassBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2456:10)
 @ ./app/views/components/layout.js 17:14-36

Reactjs Component

class Logo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            method: 'GET',
            success: (response) => {
                console.log(response);
                this.setState({logoPath: response});
            }.bind(this),
            error: (xhr, status, err) => {
                console.error(this.props.url, status, err.toString());
            }.bind(this),
            data: {
                location: this.props.location
            }
        });
    }

    render() {
        return (
            <div className="logo">
                <a href="/">
                    <img src={ this.state.logoPath } alt="Home"/>
                </a>
            </div>
        )
    }
}

Answer 1

I'm surprised by the error, though I notice that ArrowFunction is an AssignmentExpression whereas FunctionExpression is a PrimaryExpression ( spec ), so arrow function expressions aren't direct drop-ins for function function expressions. Still surprised.

Two options for you:

1. You don't need those .bind(this) calls. Arrow functions close over the this in the context where they're created (just like closing over a variable). So you can solve the error simply by removing those bind calls.

   Example:

    var foo = { name: "foo", doSomething() { setTimeout(() => { log("this.name = " + this.name); }, 0); } }; foo.doSomething(); function log(msg) { var p = document.createElement('p'); p.appendChild(document.createTextNode(msg)); document.body.appendChild(p); } 

2. Alternately, if you needed bind (perhaps to curry arguments; the this part will be ignored), put parens around the arrow function:

    $.ajax({ success: ((response) => { // ----------^ }).bind(null, arg0, arg1/*...*/) // --^ ^^^^-- will be ignored, arrow functions inherit `this` }); 

   Example:

    var foo = { name: "foo", doSomething() { setTimeout(((arg) => { // ----------^ log("this.name = " + this.name + ", arg = " + arg); }).bind(null, "bar"), 0); // ^ ^^^^-- ignored, could be anything } }; foo.doSomething(); function log(msg) { var p = document.createElement('p'); p.appendChild(document.createTextNode(msg)); document.body.appendChild(p); }