ExtractTextPlugin doesn't work with Webpack 2.2 anymore

Question

When I want to build my frontend via webpack -p --progress --hide-modules I get the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[1].use should be a string.
    * configuration.module.rules[1].use should be an instance of function.
    * configuration.module.rules[1].use should be an object.
    * configuration.module.rules[1].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[1].use should be an instance of function.
    * configuration.module.rules[1].use[1] should be a string.
    * configuration.module.rules[1].use[1] should be an instance of function.
    * configuration.module.rules[1].use[1] has an unknown property 'fallback'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[1].use[1] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[1].use[1] should be one of these:
      non-empty string | function | object { loader?, options?, query? }
error Command failed with exit code 1.

I did not touch any of my webpack config files. I'm using this package versions:

"babel-loader": "^6.2.10",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "beta",
"file-loader": "^0.9.0",
"jest": "^16.0.1",
"node-sass": "^4.3.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-manifest-plugin": "^1.1.0"

and this config inside my webpack.config.js:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  context: path.resolve(__dirname, './resources/assets'),
  entry: {
    index: './src/index.js',
    kpi: ['whatwg-fetch', './js/kpi/index.js'],
    quiz: './js/quiz/index.js',
  },
  output: {
    path: path.resolve(__dirname, './public/js'),
    publicPath: '/js/',
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'resolve-url-loader',
            'sass-loader?sourceMap',
          ],
          options: {
            publicPath: '/css/',
          },
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          publicPath: '/img/',
          name: '../img/[name].[ext]',
        },
      },
      {
        test: /\.(woff2?|ttf|eot|svg)$/,
        loader: 'file-loader',
        options: {
          publicPath: '/fonts/',
          name: '../fonts/[name].[ext]',
        },
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({ filename: '../css/[name].[contenthash].css' }),
    new ManifestPlugin({ fileName: '../manifest.json' }),
  ],
};

I'm running node version 7.6 but also tried 7.3 without success. It seems that using ExtractWebpackPlugin doesn't get noticed as a correct loader. Do you know any solutions to this problem? Already tried different package version combinations.

Answer 1

ExtractTextPlugin.extract accepts an object with the following properties:

• use
• fallback
• publicPath

But you're giving it an options property, which seems to mess up the resulting loader. You need to change your .scss rule to:

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap',
    ],
    publicPath: '/css/'
  }),
},