Webpack，babel错误：模块构建失败：SyntaxError：意外令牌

Question

使用Webpack编译代码时，在= after状态下遇到意外令牌错误。 我的代码如下：

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预设来声明此类。 看到这个副本

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

}