Webpack define plugin causes: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

I am trying to define a global variable to define config driven flows in my react app. To do this i add below definePlugin snippet in my webpack plugin section

new webpack.DefinePlugin({ 'MODE': JSON.stringify('SERVER_DEV')
})

As soon as i do this my build starts to fail complaining of

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

I am a bit clueless on how the error and cause are related. Please note if i remove this pluggin def things go back to normal :)

Here is my webpack file:

var path = require("path");
var fs = require("fs");
var webpack = require("webpack");
module.exports = {
module: { loaders: [ { test: /.jsx$/, loader: 'babel-loader', query: { cacheDirectory: true, presets: ['es2015'] } }, { test: /.css$/, loader: "style-loader!css-loader" }, { test: /.woff(?v=d+.d+.d+)?$/, loader: "url-loader!url-loader?limit=10000&mimetype=application/font-woff" }, { test: /.woff2(?v=d+.d+.d+)?$/, loader: "url-loader!url-loader?limit=10000&mimetype=application/font-woff" }, { test: /.ttf(?v=d+.d+.d+)?$/, loader: "url-loader!url-loader?limit=10000&mimetype=application/octet-stream" }, { test: /.eot(?v=d+.d+.d+)?$/, loader: "url-loader!file-loader" }, { test: /.svg(?v=d+.d+.d+)?$/, loader: "url-loader!url-loader?limit=10000&mimetype=image/svg+xml" } ]
},
entry: path.resolve(__dirname, './src/client/app.jsx'), resolve: { modules: ['node_modules',path.join(__dirname, "src"),], alias: { react: path.resolve('node_modules/react'), }, extensions:[".js", ".jsx", ".json"]
},
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) , new webpack.DefinePlugin({ 'MODE': JSON.stringify('SERVER_DEV') }) ],
};

Any idea what this error is trying to tell me?