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?