Ruby on rails 网页包意外令牌错误

我正在使用Rails 5和react with webpack 2.1.0-beta.7。 使用gem'react rails'，“~>1.7.0”

但是，每次尝试运行webpack时，我都会遇到此错误

Hash: 3aea6d8a27453c0be041
Version: webpack 2.1.0-beta.7
Time: 507ms
    + 1 hidden modules

ERROR in ./app/assets/frontend/main.jsx
Module build failed: SyntaxError: /mnt/data/Projects/kasih.in-dev/kasih.in/app/assets/frontend/main.jsx: Unexpected token (5:8)
  3 |   render() {
  4 |     return (
> 5 |         <h1>Hello world</h1>
    |         ^
  6 |     );
  7 |   }
  8 | }
    at Parser.pp.raise (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/util.js:89:8)

如果您需要，这里是我的jsx文件：

class Main extends React.Component {
  render() {
    return (
        <h1>Hello world</h1>
    );
  }
}

let documentReady = () => {
  React.render{
    <Main />,
    document.getElementById('main');
  };
};

$(documentReady);

类主扩展React.Component{
render（）{
返回(
你好，世界
);
}
}
让documentReady=（）=>{
反应{
,
document.getElementById（'main'）；
};
};
美元（documentReady）；

---

我想知道这个错误的原因是什么，以及如何修复它？

您需要安装几个软件包

然后将这些预设添加到您的网页配置中

loaders: [{ 
  test: /\.jsx$/, 
  loader: "babel-loader", 
  query: { 
    presets: ['es2015', 'react']  
  } 
}]

---

谢谢它起作用了。也许我在阅读文档时漏掉了什么，但你怎么能找到问题所在呢？抱歉，我仍在试图弄清楚这是如何工作的。您使用的是

ES2015

和

React+JSX

，因此您需要合适的预设软件包，您可以在此处阅读有关babel预设的更多信息

npm i --save-dev babel-preset-react babel-preset-es2015

loaders: [{ 
  test: /\.jsx$/, 
  loader: "babel-loader", 
  query: { 
    presets: ['es2015', 'react']  
  } 
}]