Module build failed: SyntaxError: Missing class properties transform when using webpack2

Question

I am using React for my project and I was migrating from webpack2 to webpack3. After updating babel and all dependencies I executed npm run build which resulted in error: Module build failed: SyntaxError: Missing class properties transform.

Examples of errors:

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

Another example:

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

Does someone knows where is the problem? I try to google about error but I didn't find any solution so far...

.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;

build command:

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

Answer 1

Did you forgot to install it ?

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

By the way you don't need to configure babel-loader options in webpack if you are using .babelrc .
So you can remove this:

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