CODEWITHSUNDEEP
javascriptreactjsbabeljs
TheWebs
TheWebs

Reputation: 12923

Unexpected Token in React

I am getting the following error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
SyntaxError: /vagrant/resources/assets/js/react/react_app.js: Unexpected token (366:10)
  364 | var InvestorsTable = React.createClass({
  365 | 
> 366 |     mixins: [Polling, StateHandler, ComponentBase],
      |           ^
  367 | 
  368 |     render: function() {
  369 |         return(
    at Parser.pp.raise (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.jsxParseExpressionContainer (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:301:8)
    at Parser.pp.jsxParseElementAt (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:370:30)
    at Parser.pp.jsxParseElementAt (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:362:30)
    at Parser.pp.jsxParseElement (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:398:15)
    at Parser.parseExprAtom (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:410:21)
    at Parser.pp.parseExprSubscripts (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/vagrant/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)

This error is caused by the following code:

var InvestorsTable = React.createClass({

    mixins: [Polling, StateHandler, ComponentBase],

    render: function() {
        return(
            <Table data={this.state.data} />
        );
    }
});

How is this invalid syntax? Where is my "unexpected token"? I have another class:

var CapitalRaised = React.createClass({

    mixins: [Polling, StateHandler, ComponentBase],

    ...

});

This class doesn't throw an error when its compiled and its compiled BEFORE the above class. Like I can't see what the issue is ....

Upvotes: 0

Views: 3268

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161447

You have an unclosed JSX element father up above in your file above that class. Since you haven't shown your full code, here is an example.

var CapitalRaised = React.createClass({
  render(){
    return (<div>);
  }
});

var InvestorsTable = React.createClass({

  mixins: [Polling, StateHandler, ComponentBase],

  render: function() {
    return(
      <Table data={this.state.data} />
    );
  }
});

The <div> element is not closed. This will throw Unexpected token (9:8) because JSX takes the form of <div> ... { mixins: [Polling and in JSX, content inside {} is supposed to be a JS expression, and mixins: is not a valid start to an expressions.

Upvotes: 4

Related Questions