Reagieren Webpack "unerwartete Token" namens Pfeil Funktion

Question

Ich habe React Fullstack-Umgebung mit Webpack-Middleware eingerichtet. Ich habe einige es6 Syntax in meinem Code, aber ich bekomme Fehler während Zustand ohne Konstruktor oder benannte Pfeilfunktion. Zum Beispiel möchte ich semantisch-ui verwenden für Sortiertabelle reagieren: https://react.semantic-ui.com/collections/table#table-example-sortable Und beim Kompilieren ich diesen Fehler: enter image description here

Ich dachte, es wegen der falschen webpack Setup ist ich es unten angebracht.

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './client/index.js', 
    output: { 
    path: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html' 
    }) 
    ] 
}; 

.babelrc

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

Answer 1

Sie versuchen Klasseneigenschaften zu verwenden, die derzeit Stufe 3 als Teil des Class fields proposal. Um sie heute nutzen zu können, müssen Sie babel-plugin-transform-class-properties installieren.

npm install --save-dev babel-plugin-transform-class-properties 

und fügen Sie Ihre Plugins in .babelrc.

{ 
    "presets": ["env", "react"], 
    "plugins": ["transform-class-properties"] 
} 

Ich entfernte auch die es2015 Preset, da es für babel-preset-env veraltet ist, die alles enthält es2015 tut und vieles mehr.