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 }),
  ],
};

Michael Jungo · Accepted Answer · 2017-02-21T14:32:02.647

5

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')
}

edited Feb 21 '17 at 14:32

answered Feb 21 '17 at 13:54

Michael Jungo

31,583
3
91
84

@Micahel Jungo - This has fixed it however, my sass is not compiling into the main.css sheet? – Filth Feb 21 '17 at 13:58
Without `ExtractTextPlugin` it won't create a css file, but it's in your JS bundle. So if you still want it to be extracted, you need to use the plugin in development as well. – Michael Jungo Feb 21 '17 at 14:01
Sorry mate I'm a bit confused... It seems this is all around the debug state. Is it better to remove it? I'm unsure what my webpack.config file should look like to get this running and compiling sass into a single .css sheet? – Filth Feb 21 '17 at 14:17
Yes if you remove it entirely, you can just always use the same plugins and it will always extract them into a css file. I updated the answer to show the other possibility (adding it to dev plugins as well) – Michael Jungo Feb 21 '17 at 14:32
Removed debug entirely and working! What a mission - many thanks. – Filth Feb 21 '17 at 14:42

Paul Kaspriskie · Answer 2 · 2017-02-21T14:45:08.887

2

So I solved this by installing style-loader, css-loader, and sass-loader.

npm install style-loader css-loader sass-loader --save-dev

Then I used them like this.

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
 },

edited Feb 21 '17 at 14:45

answered Feb 21 '17 at 13:48

Paul Kaspriskie

201
2
5

I updated the code to your suggestion and no fix sadly :-( – Filth Feb 21 '17 at 13:50
Just to confirm, are you using webpack 1 or 2 ? Also are you getting the same error ? – Paul Kaspriskie Feb 21 '17 at 13:52
I just wanted to make sure I was providing with proper syntax, since it webpack pack 2 it changes a bit. Also I got to work on a project with using style loader and css loader along with extract text I will be updating my answer. – Paul Kaspriskie Feb 21 '17 at 14:10
Can you please show me with you new edits what your full config file looks like? – Filth Feb 21 '17 at 14:22

score 0 · Answer 3 · answered Jun 12 '17 at 12:59

Error occurred for me because of incorrect format of parameters - refer this -> https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/207

my code looks like this module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }] }, plugins: [ new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }) ]

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

3 Answers3