Missing class properties transform in webpack/babel

Question

i'm adding server side rendering on my app so i divided my webpack into three webpack config files,before dividing everything is working fine.
webpack.base.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSExtract = new ExtractTextPlugin('styles.css');
module.exports ={
    module:{
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            options:{
                presets:[
                    'react',
                    'stage-0',
                    ['env',{targets:{browsers:['last 2 versions']}}]
                ]
            }
        },
            {
                test: /\.s?css$/,
                use: CSSExtract.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                })
            },{
                test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: "file-loader",
            }
        ]
    },
    devtool:'inline-source-map',
    plugins: [
        CSSExtract
    ]
}

webpack.client.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const config = {
    entry: './src/client/app.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'public')
    },

}
module.exports  = merge(baseConfig,config)

webpack.server.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternal = require('webpack-node-externals')

const config = {
    target:'node',
    entry: './src/index.js',

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'build')
    },
    externals:[webpackNodeExternal()]
}

module.exports  = merge(baseConfig,config)

package.json(dependencies)

"devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "file-loader": "^1.1.11",
    "redux-devtools-extension": "^2.13.2",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-es2017": "6.24.1",
    "css-loader": "0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "history": "^4.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "0.18.2",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1",
    "webpack-node-externals": "1.6.0",
    "webpack-merge": "4.1.0"
  }

.babelrc

{
    "presets": [
        "es2015", "stage-0",
        "env",
        "react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

scripts(package.json)

"scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build  --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch ",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  }

it showing me Module build failed: SyntaxError: Missing class properties transform.

my problem is why my .babelrc file presets and plugins is not adding in webpack is there any other way to add babel plugin in webpack.
im using webpack 3.1.0

im stuck please help........

Answer 1

Please change the order of presets accordingly:

presets: ["es2015", "env", "react", "stage-0"]

for @font-face please add url-loader

{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

Let me know if the issue still persists