Extract Text Plugin 'loader is used without the corresponding plugin' - React, Sass, Webpack

Question

I'm trying to get SASS compilation running on my React + Webpack project and keep running into this error:

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

Followed the guidelines from this tutorial: Link

Here is my webpack.config.js

Any suggestions?

const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new ExtractTextPlugin('dist/styles/main.css', {
        allChunks: true
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Answer 1

When your NODE_ENV is not production, you don't include any plugins.

plugins: debug ? [] : [
  new ExtractTextPlugin('dist/styles/main.css', {
    allChunks: true
  }),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],

So when debug is true, you'll have

plugins: []

But you're still using it in the .scss loader.

To solve it, you can add it to these plugins as well (so you don't have the production plugins like UglifyJsPlugin):

plugins: debug
  ? [
      new ExtractTextPlugin("dist/styles/main.css", {
        allChunks: true
      })
    ]
  : [
      new ExtractTextPlugin("dist/styles/main.css", {
        allChunks: true
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
    ]

Or you don't use the ExtractTextPlugin in your .scss loader (this won't extract them to a css file in development):

{
  test: /\.scss$/,
  loader: debug ? 'css!sass' : ExtractTextPlugin.extract('css!sass')
}