Webpack，babel錯誤：模塊構建失敗：SyntaxError：意外的令牌

Question

面對意外的令牌錯誤=狀態後，當編譯使用webpack的代碼。我的代碼如下：

class GroceryItem extends React.Component { 
    state = { 
     labelValue: "Hello Pages" 
    };   
    render() { 
     return (< div onClick = { 
       this.state.labelValue 
      } > ded 

      < 
      /div>); 
     } 
    } 

我嘗試了各種方法，我發現StackOverflow，但似乎沒有工作。

.bablerc

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

.webpack..config.js

var webpack = require('webpack'); 
var path = require('path'); 
var BUILD_DIR = path.resolve(__dirname, 'public/js/'); 
var APP_DIR = path.resolve(__dirname, 'src/components'); 
var config = { 
    entry: APP_DIR + '/main.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
module : { 
    loaders : [ 
     { 
     test : /\.jsx?$/, 
     include : APP_DIR, 
     loader : 'babel', 
     query:{ 
      presets: ['react'] 
     } 
     } 
    ]} 
}; 

module.exports = config; 

Answer 1

您需要babel-preset-stage-x預設聲明類這樣的。 看到這repl

{ 
    presets: ["react", "es2015", "stage-2"] 

}