javascript - babel watch SyntaxError: Unexpected token - Stack Overflow

admin管理员组

文章数量:1303480

When I uses babel to watch a jsx file. But there is a syntax error.

Before that, I uses react-tools to watch, and everything is fine.

SyntaxError: assets/js/chat/chat.jsx: Unexpected token (258:16)
  256 |         if (this.props.isOpen) {
  257 |             return (
> 258 |                 <div className="modal-overlay">
      |                 ^
  259 |                     <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
  260 |                         <div className="chat-modal">
  261 |                             {this.props.children}

The following is my code.

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Modal = React.createClass({
    render: function() {
        if (this.props.isOpen) {
            return (
                <div className="modal-overlay">
                    <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                        <div className="chat-modal">
                            {this.props.children}
                        </div>
                    </ReactCSSTransitionGroup>
                </div>
            )
        } else {
            return <div className="modal-overlay"><ReactCSSTransitionGroup transitionName={this.props.transitionName}/></div>
        }
    }
});

When I uses babel to watch a jsx file. But there is a syntax error.

Before that, I uses react-tools to watch, and everything is fine.

SyntaxError: assets/js/chat/chat.jsx: Unexpected token (258:16)
  256 |         if (this.props.isOpen) {
  257 |             return (
> 258 |                 <div className="modal-overlay">
      |                 ^
  259 |                     <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
  260 |                         <div className="chat-modal">
  261 |                             {this.props.children}

The following is my code.

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Modal = React.createClass({
    render: function() {
        if (this.props.isOpen) {
            return (
                <div className="modal-overlay">
                    <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                        <div className="chat-modal">
                            {this.props.children}
                        </div>
                    </ReactCSSTransitionGroup>
                </div>
            )
        } else {
            return <div className="modal-overlay"><ReactCSSTransitionGroup transitionName={this.props.transitionName}/></div>
        }
    }
});

• javascript
• babeljs
• reactjs

Share Improve this question Follow edited Nov 13, 2015 at 15:45 Leonid Beschastny 51.5k1010 gold badges121121 silver badges124124 bronze badges asked Nov 11, 2015 at 9:11 augustineaugustine 53844 silver badges1515 bronze badges 2

• it looks fine, what is this ReactCSSTransitionGroup? maybe the error is within that ponent. can you try removing it and see if it throws the same error? – Chris Hawkes Commented Nov 12, 2015 at 16:23
• ReactTransitionGroup is an add-on ponent that react provides. facebook.github.io/react/docs/animation.html I will try to remove it. – augustine Commented Nov 13, 2015 at 4:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I had a similar issue the other day. It seems that babel now needs some additional plugins to work with react.

See the answer in this SO question: babel-loader jsx SyntaxError: Unexpected token

mand:

babel --watch assets/js/ --out-dir dist/js/ --presets react

or package.json:

{
    "name": "myweb",
    "version": "1.0.0",
    "babel": {
        "presets": ["react"]
    }
}

Which version of babel you have? If you upgraded to 6, you have to add react preset...

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel",
    query:
    {
      presets:['react', 'es2015', 'stage-0']
    }
  }

本文标签： javascriptbabel watch SyntaxError Unexpected tokenStack Overflow