ReactJS-模塊構建失敗：SyntaxError：意外的令牌反應組件未呈現

Question

我返回這樣的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/
      }
    ]

返回：

模塊構建失敗：錯誤：找不到相對於目錄的預設“反應”

所以我引用了這個問題並嘗試了：

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

仍然得到：

模塊構建失敗：錯誤：找不到相對於目錄的預設“反應”

如何獲得反應組件以使用Webpack配置正確呈現？

鏈接的答案建議npm ls babel-preset-es2015獲得：

new_platform_prototype@1.0.0 / projects / new-platform-prototype└──babel-preset-es2015@6.24.1

Answer 1

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

這應該可以解決您的問題。

Answer 2

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

嘗試將jsx更改為js

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