WebPack - ExtractTextPlugin.extract - Module build failed: No input specified: provide a file name or a source string to process

Question

I've just upgraded to the latest WebPack and my existing configuration throws up an error, I have tracked down which code causes the issue, but not sure how to resolve it.

I have tracked the error down to here

  {
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
      fallbackLoader: 'style',
      loader: 'css?minimize!sass!postcss'
    })
  },

Entries from Package.json

"webpack": "2.2.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"html-webpack-plugin": "^2.24.1",

Error

ERROR in ./~/css-loader?minimize!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: No input specified: provide a file name or a source string to process
 @ ./src/index.scss 4:14-172
 @ ./src/main.ts

ERROR in ./src/index.scss
Module build failed: ModuleBuildError: Module build failed: No input specified: provide a file name or a source string to process
    at d:\workible\data-extractor\app-client\node_modules\webpack\lib\NormalModule.js:137:35
    at d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js:51:13)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2234:31
    at apply (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:20:25)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:56:12
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:840:16
    at module.exports.render (d:\workible\data-extractor\app-client\node_modules\node-sass\lib\index.js:375:5)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:3894:5
    at process (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2299:17)
    at Immediate.<anonymous> (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2112:16)
    at runCallback (timers.js:649:20)
    at tryOnImmediate (timers.js:622:5)
    at processImmediate [as _immediateCallback] (timers.js:594:5)

ERROR in d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js!d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss doesn't export content

WebPack Configuration

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          loader: 'css?minimize!sass!postcss'
        })
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ts'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      conf.paths.src
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('query-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})
  ],
  postcss: () => [autoprefixer],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  resolve: {
    extensions: [
      '',
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: `./${conf.path.src('main')}`,
  ts: {
    configFileName: 'tsconfig.json'
  },
  tslint: {
    configuration: require('../tslint.json')
  }
};

Added Some CSS to my .scss file as per @ickiir

body {}

Now the Error has advanced to

ERROR in ./src/index.scss
Module build failed: ReferenceError: window is not defined
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:99:30
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:94:47
    at module.exports (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:116:68)
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:400:36)
    at __webpack_require__ (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:21:30)
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:65:18
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:68:10)
    at Module._compile (module.js:570:32)
    at Object.exec (d:\workible\data-extractor\app-client\node_modules\webpack\lib\NormalModule.js:94:6)
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js:112:21)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\webpack\lib\Compiler.js:251:10)
    at d:\workible\data-extractor\app-client\node_modules\webpack\lib\Compiler.js:442:12
    at next (d:\workible\data-extractor\app-client\node_modules\tapable\lib\Tapable.js:138:11)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js:93:4)
    at next (d:\workible\data-extractor\app-client\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\ts-loader\dist\after-compile.js:11:13)

ERROR in d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js!d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss doesn't export content

Answer 1

I finally resolved this issue by doing the following.

I made sure that my index.scss file was not empty by adding the following (as per @ickyrr)

body {}

And I removed the fallbackLoader

  {
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
      //fallbackLoader: 'style',
      loader: 'css?minimize!sass!postcss'
    })
  },

Answer 2

As of webpack version 2.2.1 there is a syntax change... so instead of using loader or loaders the correct syntax would be 'use'

here is an example:

BEFORE:

    {
        test: /\.(scss|sass)$/,
        include: helpers.root('src/app'),
        exclude: [/\.global\.(scss|sass)$/, 'src'],
        loaders: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
    },

AFTER:

    {
        test: /\.(scss|sass)$/,
        include: helpers.root('src/app'),
        exclude: [/\.global\.(scss|sass)$/, 'src'],
        use: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
    },