Ошибка в Webpack: Неожиданный токен

Question

друзей! У меня проблемы с сборкой webpack. В WebPack я использую Бабель 6^+ это пресеты:

presets: ['es2015', 'stage-1', 'react'] 

После запуска НПМ я ловлю ошибку:

ERROR in ./src/common/components/layout/Header.js 
Module build failed: SyntaxError: C:/Users/Anton/projects/isomorphic-redux-app/src/common/components/layout/Header.js: Unexpected token (13:15) 
    11 | } 
    12 | 
    13 | handleToggle =() => this.setState({open: !this.state.open}); 
    |    ^
    14 | 
    15 | render() { 
    16 |  return (

Сначала я подумал, что у меня есть ошибки в коде, и я просто копировать/вставить это из документов Material-UI, но это тоже сломано. Header.js файл:

import React, { Component, PropTypes } from 'react'; 
import LeftNav from 'material-ui/lib/left-nav'; 
import AppBar from 'material-ui/lib/app-bar'; 
import RaisedButton from 'material-ui/lib/raised-button'; 

export default class Header extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    } 

    handleToggle =() => this.setState({open: !this.state.open}); 

    render() { 
    return (
     <div> 
     <RaisedButton 
      label="Controlled LeftNav That Opens From Right" 
      onTouchTap={this.handleToggle} /> 
     <LeftNav width={200} openRight={true} open={this.state.open} > 
      <AppBar title="AppBar"/> 
     </LeftNav> 
     </div> 
    ); 
    } 
} 

И webpack.config:

var path = require('path'); 
var webpack = require('webpack'); 
var merge = require('merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 


var webpackConfig = { 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.NoErrorsPlugin() 
    ] 
}; 

if (process.env.NODE_ENV === 'production') { 

    webpackConfig = merge(webpackConfig,{ 
    devtool: "source-map", 
    entry : [ 
     './src/client/index.js' 
    ], 
    resolve: { 
     extensions: ["", ".js", ".jsx"] 
    }, 
    module: { 
    loaders: [{ 
    test: /\.js$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
    query: { 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
     }, 
     { 
     test: /\.jsx$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     include: __dirname, 
     query: { 
      presets: ['es2015', 'stage-1', 'react'], 

     } 
     }, 
     { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'}, 
     { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') } 
    ]}, 
    plugins : [ 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify('production') 
     } 
     }), 
     new ExtractTextPlugin("app.css"), 
     new webpack.optimize.UglifyJsPlugin({minimize: true}) 
    ] 
    }); 

}else{ 

    webpackConfig = merge(webpackConfig,{ 
    devtool: 'inline-source-map', 
    module: { 
     loaders: [{ 
    test: /\.js$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
     env: { 
     development: { 
      plugins: [ 
      'react-transform' 
      ], 
      extra: { 
      'react-transform': { 
       transforms: [{ 
       transform: 'react-transform-hmr', 
       imports: ['react'], 
       locals: ['module'] 
       }, 
       { 
       transform: 'react-transform-catch-errors', 
       imports: ['react','redbox-react' ] 
       } 
      ]} 
      } 
     } 
     },// 
     query: { 
//   optional: ['runtime'], 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
    }, 
    { 
    test: /\.jsx$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
    env: { 
     development: { 
      plugins: [ 
      'react-transform' 
      ], 
      extra: { 
      'react-transform': { 
       transforms: [{ 
       transform: 'react-transform-hmr', 
       imports: ['react'], 
       locals: ['module'] 
       }, 
       { 
       transform: 'react-transform-catch-errors', 
       imports: ['react','redbox-react' ] 
       } 
      ]} 
      } 
     } 
     }, 
    query: { 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
    }, 
    { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'}, 
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') } 
]}, 
entry : [ 
    'webpack-hot-middleware/client', 
    './src/client/index.js', 
], 
resolve: { 
    extensions: ["", ".js", ".jsx"] 
}, 
plugins : [ 
    new webpack.HotModuleReplacementPlugin(), 
    new ExtractTextPlugin("app.css") 
    ] 
    }); 

} 

module.exports = webpackConfig; 

Как я могу решить это?

Answer 1

Вам не нужна функция стрелки (и он является недействительным синтаксис) здесь, потому что вы определяете class метод:

handleToggle =() => this.setState({open: !this.state.open}); 

Попробуйте вместо этого:

handleToggle() { this.setState({open: !this.state.open}); } 

Однако, поскольку методы класса не привязаны автоматически, вам необходимо связать их в конструкторе или при его использовании:

constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    this.handleToggle = this.handleToggle.bind(this); 
    } 

Если бы вы были внутри render или другого метода класса, вам нужно будет добавить const или эквивалент фронта (при использовании задания с =):

render() { 
    const handleToggle =() => this.setState({open: !this.state.open}); 
} 

Answer 2

Чтобы получить свойства класса, вам необходимо использовать этап Babel 1.

http://babeljs.io/docs/plugins/preset-stage-1/

шаг 1: добавить зависимость следующим образом:

npm install babel-preset-stage-1 --save 

шаг 2: изменение файла .babelrc следующим образом:

{ 
    "presets": ["es2015", "react","stage-1"] 
} 

Answer 3

Если я правильно, вы пытаетесь используйте инициализатор свойств, который является функцией ES7. Чтобы исправить это, вам нужно будет использовать предустановку stage-1.

Более подробная информация here

Answer 4

Если вы хотите использовать стрелку функции класса и избегать привязок к конструктору (этот бит):

this.handleToggle = this.handleToggle.bind(this); 

Тогда вы можете нам свойства свойства преобразования babel. Для этого загрузите модуль в командной строке:

npm i --save babel-plugin-transform-class-properties 

Затем в вашем.babelrc:

{ 
    "plugins": ["transform-class-properties"] 
} 

Затем вы можете использовать чистящее синтаксис и удалить связывание в конструкторе:

handleToggle =() => this.setState({open: !this.state.open}); 

Это, как предполагается, в стадии-0 или 1 ступень-пресет, но у меня только когда-либо удалось заставить его работать, явно ссылаясь на плагин (как указано выше).