babel watch SyntaxError：意外的令牌

Question

當我使用babel觀看jsx文件時。 但是存在語法錯誤。

在此之前，我使用react-tools觀看，一切都很好。

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}

以下是我的代碼。

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>
        }
    }
});

Answer 1

命令：

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

或者package.json：

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

Answer 2

前幾天我遇到了類似的問題。 看來babel現在需要一些額外的插件來處理反應。

請參閱此SO問題中的答案： babel-loader jsx SyntaxError：意外的令牌

Answer 3

你有哪個版本的babel？ 如果升級到6，則必須添加反應預設...

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