javascript - ReactJS-模块构建失败:SyntaxError:意外的 token react 组件未呈现

我返回这样的react组件：

return (
    <section style={styleObj} id="Profile" >
      <h2 className="colorHeader">{this.state.color}</h2>
      <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
      <div id="slider"></div>
    </section>
  );

结果是：

ERROR in ./app/js/modules/colorpicker.js
Module build failed: SyntaxError: Unexpected token (31:4)

  29 |
  30 |   return (
> 31 |     <section style={styleObj} id="Profile" >
     |     ^
  32 |       <h2 className="colorHeader">{this.state.color}</h2>
  33 |       <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
  34 |       <div id="slider"></div>

据我目前的了解，您需要一个babel编译器来正确转换它。我的webpack配置的相关部分如下所示：

module: {
  rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }]
  },

我进行了更多研究并尝试了以下方法：

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

返回：


  模块构建失败：错误：找不到相对于预设的“反应”
  目录


So I referenced this question and tried this:

{
  "presets": ["es2015", "react"]
}

仍然得到：


  模块构建失败：错误：找不到相对于预设的“反应”
  目录


如何获得反应组件以使用Webpack配置正确呈现？

链接的答案建议npm ls babel-preset-es2015可以得到：


  [email protected] / projects / new-platform-prototype└──
  [email protected]

最佳答案

npm install -D babel-preset-react babel-preset-es2015

这应该可以解决您的问题。