モジュールビルドに失敗しました：SyntaxError：webpack2使用時にクラスプロパティが変換されません

Question

プロジェクト用にReactを使用していて、webpack2からwebpack3に移行していました。エラーのModule build failed: SyntaxError: Missing class properties transform.

例：バベルとすべての依存関係を更新した後、私はエラーになったnpm run buildを実行

11 | 
    12 | class Login extends Component { 
> 13 |  state = { 
    | ^
    14 |   email: "", 
    15 |   password: "" 
    16 |  } 

もう一つの例：

11 | class Navigation extends React.Component { 
    12 | 
> 13 |  state = { 
    | ^
    14 |   loadingTotal: false, 
    15 |  } 

は、誰かが、問題がどこにあるのを知っていますか？私は、エラーをGoogleしようとするが、私はこれまで任意の解決策を見つけることができませんでした...

.babelrc

{ 
    "presets": ["env", "stage-2", "react"], 
    "plugins": [ 
    "react-hot-loader/babel", 
    "transform-class-properties" 
    ] 
} 

webpack.config

const webpack = require('webpack'); 
const WriteFilePlugin = require('write-file-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 

const path = require('path'); 
const config = { 
    entry: { 
     'vendor': './dist/vendor', 
     'app': [ 
      'react-hot-loader/patch', 
      './app/index' 
     ] 
    }, 
    output: { 
     path: process.env.WEBPACK_ENV === 'production' ? path.join(__dirname, '/../../../../public_html/') : path.join(__dirname, '/public'), 
     filename: '[name].js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['.ts', '.js', '.json'] 
    }, 
    module: { 
     rules: [ 
      // { enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' } 
      { 
       test: /\.(js|jsx)?$/, 
       exclude: /node_modules/, 
       options: { 
        presets: ['env'] 
       }, 
       loader: 'babel-loader' 
      }, 
      {test: /\.json$/, loader: 'json-loader'}, 
      {test: /\.html/, loader: 'html-loader'}, 
      {test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'}, 
      {test: /\.css$/, loader: 'style-loader!css-loader'}, 
      {test: /\.(gif|png|jpe?g)$/i, loader: 'file-loader?name=images/[name].[ext]'}, 
      { 
       test: /\.woff2?$/, 
       loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff' 
      }, 
      {test: /\.(ttf|eot|svg)$/, loader: 'file-loader?name=fonts/[name].[ext]'} 
     ] 
    } 
}; 

console.log(process.env.WEBPACK_ENV); 

config.devtool = process.env.WEBPACK_ENV === 'production' ? 'source-map' : 'eval-source-map'; 
config.plugins = [ 
    new webpack.ProvidePlugin({ 
     '$': "jquery", 
     'jQuery': "jquery", 
     'window.jQuery': "jquery", 
     'window.$': 'jquery' 

    }), 
    new webpack.DefinePlugin({ 
     'WEBPACK_ENV': process.env.WEBPACK_ENV === 'production' ? '"production"' : '"dev"' 
    }), 
    new ExtractTextPlugin("styles.css"), 
    process.env.WEBPACK_ENV === 'production' ? new UglifyJSPlugin() : WriteFilePlugin() 
] 


module.exports = config; 

ビルドコマンド：

"NODE_ENV=production BABEL_ENV=production WEBPACK_ENV=production ./node_modules/.bin/webpack --config webpack.config.js", 

Answer 1

install itをお忘れですか？あなたは.babelrcを使用している場合のWebPACKにバベル・ローダオプションを設定する必要はありませんちなみに

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

。
これを削除できます：

options: { 
    presets: ['env'] 
},