babel watch SyntaxError: Unexpected token

Posted 2023-02-22

【中文标题】babel watch SyntaxError: Unexpected token

【英文标题】：

【发布时间】：2016-02-12 08:28:29

【问题描述】：

当我使用 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>
        
    
);

【问题讨论】：

看起来不错，这个 ReactCSSTransitionGroup 是什么？也许错误在该组件内。你可以尝试删除它，看看它是否会引发同样的错误？

ReactTransitionGroup 是 react 提供的附加组件。 facebook.github.io/react/docs/animation.html我会尝试删除它。

【参考方案1】：

前几天我遇到了类似的问题。看来 babel 现在需要一些额外的插件来处理 react。

查看这个 SO 问题的答案：babel-loader jsx SyntaxError: Unexpected token

【讨论】：

我已经安装了 babel-preset-react。问题是我没有添加“--presets”选项。

【参考方案2】：

命令：

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

或 package.json：

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

【讨论】：

谢谢。我在 webpack.config.js 的模块/规则/选项/预设中添加了这个，而不是 package.json - 但它正在工作 - 万岁！关于这个问题的报告如此之多，并且不同的解决方案似乎适用于每种情况。奇怪。

【参考方案3】：

你有哪个版本的 babel？如果你升级到6，你必须添加react preset...

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

【讨论】：

babel 版本为 6.1.18。我已经安装了 babel-preset-react。但是我发现了问题，我没有添加“--presets”选项。