Stuck up on ‘loader is used without the corresponding plugin’

[kapooostin]

Webpack cannot compile the bundle.

config:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: __dirname + '/src/js/main.jsx',
    output: {
        path: __dirname + "/dist/js",
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!sass-loader' ) },
        ],
        plugins: [
            new ExtractTextPlugin( "bundle.css" )
        ]
    }
};

main/jsx

...
require( "../style/main.scss" );
...

Loaders are installed. It works fine when I just inline styles in bundle.
What did I do wrong?

[sokra]

It's plugins not module.plugins

[kapooostin]

Thank you!

I was sure it would be something silly.

[manodupont]

I have this

<script src="https://gist.github.com/manodupont/ea38455f608a87970b22.js"></script>

Still it stuck with loader not corresponding ...

[manodupont]

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: __dirname + '/src/js/main.jsx',
    output: {
        path: __dirname + "/dist/js",
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!sass-loader' ) },
        ]        
    },
    plugins: [ 
      new ExtractTextPlugin( "bundle.css" )
    ]
};

[manodupont]

Still, it doesn't work

[1] ERROR in ../src/containers/Main.scss
[1] Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
[1] at Object.module.exports.pitch (/Users/manueldupont/react-isomorphic-starterkit/node_modules/extract-text-webpack-plugin/loader.js:21:9)
[1] @ ../src/containers/Main.js 25:12-34

[manodupont]

in fact, more precisely, i have all this ..

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    target:  "web",
    cache:   false,
    context: __dirname,
    debug:   false,
    devtool: false,
    entry:   ["../src/client"],
    output:  {
        path:          path.join(__dirname, "../static/dist"),
        filename:      "client.js",
        chunkFilename: "[name].[id].js"
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: true, __DEV__: false}),
        new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
    ],
    module:  {
        loaders: [
            {
                test: /\.json$/,
                loaders: ["json"]
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
            }
        ],
        postLoaders: [
            {test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/}
        ],
        noParse: /\.min\.js/
    },
    resolve: {
        modulesDirectories: [
            "src",
            "node_modules",
            "web_modules"
        ],
        extensions: ["", ".json", ".js"]
    },
    node:    {
        __dirname: true,
        fs:        'empty'
    }
};

[pigulla]

Not sure if this is of any help to you, but I ran into this issue after upgrading from lodash 3 to 4. Switching back to 3 fixed it for me.

[jamesone]

Was this every fixed, having this exact issue right now >:(

[zhzz]

@jamesone Make sure you didn't later overwrite module.exports.plugins in your webpack config.

[grofit]

Got this issue when using it with gulp and webpack stream. I installed it, added the default example as shown in the docs, get this error.

[benregan]

I sure could use some help here too... I implemented extracttext plugin so that I could take advantage of scss sourcemaps for debugging front end styles in my app, however when I run any of my tests it is failing at my 1st .scss include with that same message. I did get scss source maps working finally, but now I can't get past my build because of this error. :-(

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

[shengxihu]

You will find this error under node 6.0.0, and you can fix it if your node version is lower. @jamesone

[monokrome]

For those of us on recent node versions, is there a fix?

[hsin421]

I had this issue.
Then I noticed I only put the ETP plugin in my production plugins, but I still had ETP in dev loaders.
So in dev I only had the loader but not the plug in.
That's why in dev I am seeing this error.

Hope it helps anybody.

[NekR]

For me this happens only when I use ETP with HappyPack, no matter which node.js version. I suppose it just strips ETP's loader by some reason.

[hurrtz]

#207
worked for me

[Nopzen]

Sorry for ripping back up this issue here, but I'm currently experience the same issue, even tho when I log my webpackConfig just before execution and it shows me this:

WebpackConfig, Plugins:  [ DefinePlugin {
    definitions:
     { 'process.env': [Object],
       NODE_ENV: 'production',
       __API_HOST__: '"http://my.app"',
       __API_ENDPOINT__: '"/api/v1"',
       __API_CLIENT_ID__: '"1"',
       __API_CLIENT_SECRET__: '"XXXXXXXXXXX"',
       __DEV__: false,
       __PROD__: true,
       __DEBUG__: false,
       __DEBUG_NEW_WINDOW__: false,
       __BASENAME__: '"/"' } },
  OccurrenceOrderPlugin { preferEntry: undefined },
  DedupePlugin {},
  HtmlWebpackPlugin {
    options:
     { template: '/src/index.hbs',
       filename: 'index.html',
       hash: false,
       inject: 'body',
       compile: true,
       favicon: '/src/static/favicon.ico',
       minify: [Object],
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       title: 'Webpack App',
       xhtml: false,
       segment: [Object],
       newRelic: [Object] } },
  ProvidePlugin { definitions: { React: 'react', ReactDOM: 'react-dom' } },
  ExtractTextPlugin {
    filename: '[name].[contenthash].css',
    options: { allChunks: true },
    id: 1 } ]

I clearly shows the ExtractTextPlugin is a part of the plugins in my config i get this following error:

[ './~/bootstrap-loader/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/bootstrap-loader/~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"preBootstrapCustomizations":"/Users/larsfalcon/Documents/dixie/dez/src/styles/project-theme/pre-customizations.scss","bootstrapCustomizations":"/Users/larsfalcon/Documents/dixie/dez/src/styles/project-theme/customizations.scss","appStyles":"/Users/larsfalcon/Documents/dixie/dez/src/styles/project-theme/theme.scss","useCustomIconFontPath":false,"extractStyles":true,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","utilities","responsive-utilities"],"scripts":false,"configFilePath":"/Users/larsfalcon/Documents/dixie/dez/.bootstraprc","bootstrapPath":"/Users/larsfalcon/Documents/dixie/dez/~/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./~/bootstrap-loader/no-op.js\nModule build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example\n    at Object.module.exports.pitch (/Users/larsfalcon/Documents/dixie/dez/node_modules/bootstrap-loader/node_modules/extract-text-webpack-plugin/loader.js:21:9)\n @ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1447' ]

If I'm running pretty much face against the wall, now after seen various issue fixes in this thread. :) If any one can see some obivious, please enlighten me :)

Here is the config of the plugin:

webpackConfig.plugins.push(
    new ExtractTextPlugin('[name].[contenthash].css', {
      allChunks: true
    })
  );

[GeorgeKnap]

running into this error too after adding the @ngtools/webpack loader and setting up the Angular's AOT.
JIT worked fine with ts-loader.

(node:13344) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\Development\AG2\src\AG2.Web\node_modules\extract-text-webpack-plugin\loader.js:27:9):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

npm 3.10.6 node 6.9.5, webpack 2.2.1, extract-text-webpack-plugin 2.0.0-rc.3

config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var ngToolsWebpack = require('@ngtools/webpack');

 entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.aot.ts'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.less', '.scss', '.css', '.html'],
        modules: [helpers.root(), helpers.root('node_modules')]
    },

    resolveLoader: {
        modules: [helpers.root('node_modules')]
    },
module.exports = {
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.ts$/,
                exclude: helpers.root('node_modules'),
                loader: 'tslint-loader',
                options: {
                    configFile: 'tslint.json'
                }
            },
            {
                test: /\.ts$/,
                loaders: ['@ngtools/webpack'],
                exclude: helpers.root('node_modules')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('[name].css'),
       new ngToolsWebpack.AotPlugin({
            tsConfigPath: './tsconfig.json'
        }),
        new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root()
      ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
      new HtmlWebpackPlugin({
            template: './index.html'
        })
    ]
};

Any ideas?

[JordyVialoux]

Guys I'm stuck on this issue as well... Any ideas?

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

[GeorgeKnap]

jsut noticed there is a new issue about this with possible solution #417

[monokrome]

@GeorgeKnap It seems like this issue disappeared :'(

[GeorgeKnap]

the url was not working. this is the one: #417

[kavi87]

@GeorgeKnap Same error with @ngtools/webpack here, did you made any progress on it ?

[GeorgeKnap]

There is a bugfix already merged into the webpack main branch that is supposed to fix this problem. Just need to wait for the next webpack release. Dne 3. 3. 2017 16:41 napsal uživatel "kavi87" <notifications@github.com>:

…

@GeorgeKnap <https://github.com/GeorgeKnap> Same error with @ngtools/webpack here, did you made any progress on it ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#50 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALXlMwvkYyb-RNi1EvSfBuqpEAEhPx4wks5riDSsgaJpZM4DcDF5> .

[deot]

you can try it,I solved the problem, but I was still very surprised

// loader config for angular component styles 
{
  test: /\.(scss|css)$/,
  use: ['raw-loader','sass-loader'], // don't use css-loader for ng2 （unusual）
},
// loader config for global css files
{
  test: /\.scss$/,
  exclude: [path.resolve(__dirname, '/node_modules/'), path.resolve(__dirname, 'src/app')], 
  // exclude: [/node_modules/, /src\/app/], something wrong with ng4
  use: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    use: ['css-loader','sass-loader']
  })
},

[GeorgeKnap]

The issue is still there in webpack 2.3.1. Guess the webpack/webpack/#4189 did not help.

"@ngtools/webpack": "1.2.14",
 "extract-text-webpack-plugin": "2.1.0",
"webpack": "2.3.1"

[JakeRowsell89]

I was running into a similar issue, which was solved by changing loaders to rules. I read somewhere that loaders is being changed to rules but no documentation seems to reflect this.. (also I'm not using ngtools)

[marghoobsuleman]

"npm install node-sass --save-dev" solved my problem.

[toddwildey]

Running into this issue with webpack 2.4 and extract-text-webpack-plugin 2.0.1:

Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin

I can also confirm that the plugin is, indeed, defined on the webpack.config.js:

webpackConfig.plugins
[ LoaderOptionsPlugin {
    options:
     { minimize: true,
       debug: false,
       options: [Object],
       test: [Object] } },
  ExtractTextPlugin { filename: '[name].css', id: 1, options: { allChunks: true } } ]

[maphi88]

Can you please help me, my code seems to be running fine on Angular 2 (build and local server) but with Angular 4 only the local server is working. On trying to create a build it gives an error

ERROR in Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Applications/XAMPP/xamppfiles/htdocs/fake_ang4/node_modules/extract-text-webpack-plugin/loader.js:25:9):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at childCompiler.runAsChild (/Applications/XAMPP/xamppfiles/htdocs/fake_ang4/node_modules/@ngtools/webpack/src/resource_loader.js:53:28)
at Compiler. (/Applications/XAMPP/xamppfiles/htdocs/fake_ang4/node_modules/webpack/lib/Compiler.js:296:10)
at /Applications/XAMPP/xamppfiles/htdocs/fake_ang4/node_modules/webpack/lib/Compiler.js:499:13
...

this is my sett up for webpack.client.js

const { root } = require('./helpers');

const { AotPlugin } = require('@ngtools/webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
/**

• This is a client config which should be merged on top of common config
  */

const extractCSS = new ExtractTextPlugin({ filename: '[name].[hash]_'+new Date().getTime()+'.css', disable: false, allChunks: true });

module.exports = {
entry: root('./src/main.browser.ts'),
output: {
filename: 'client.[hash].js'
},
target: 'web',
module: {
rules: [
{
test: /.css$/,
use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: root('./src/index.html'),
output: root('dist'),
inject: 'head'
}),
new ScriptExtPlugin({
defaultAttribute: 'defer'
}),
extractCSS,
]
};

[izverev-aexsoft]

Have same issue, compiles with JIT but fails with AOT, ExtractTextPlugin included in same way, but mysteriously missed.

[01Kuzma]

Getting the same error once moved all my files to 'src' folder:

ERROR in ./src/css/style.scss
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (D:\marstena webpack 4\node_modules\extract-text-webpack-plugin\dist\loader.js:57:11)
 @ ./src/components/App.js 26:0-27
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js ./src/js/classList.min.js ./src/js/jquery.nicescroll.min.js
...

and the same with every imported .css file

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const buildPath = path.join(__dirname, 'build');
const autoprefixer = require('autoprefixer');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const HtmlCriticalPlugin = require("html-critical-webpack-plugin");
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),

    module.exports = env => {
        const DEV_BABEL_PRESETS = env.dev ?
            [
                ['env', {
                    modules: false,
                    loose: true,
                    useBuiltIns: true,
                    targets: {
                        chrome: 55,
                        firefox: 44,
                        safari: 7,
                        ie: 11
                    }
                }]
            ] :
            [];

        const DEV_BABEL_PLUGINS = env.dev ?
            ['react-hot-loader/babel', ['transform-object-rest-spread', {
                useBuiltIns: true
            }]] :
            [];

        const DEV_WEBPACK_ENTRIES = env.dev ?
            ['react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server'] :
            [];

        const DEV_WEBPACK_PLUGINS = env.dev ?
            [new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin()] :
            [];

        const PROD_BABEL_PRESETS = env.prod ?
            [
                ['env', {
                    modules: false,
                    loose: true,
                    useBuiltIns: true,
                    targets: {
                        ie: 11
                    }
                }]
            ] :
            [];

        const PROD_BABEL_PLUGINS = env.prod ?
            [
                ['transform-object-rest-spread', {
                    useBuiltIns: true
                }],
                ['transform-runtime', {
                    helpers: false,
                    polyfill: false,
                    regenerator: true
                }]
            ] :
            [];        

        const PROD_WEBPACK_PLUGINS = env.prod ?
            [
                new webpack.optimize.ModuleConcatenationPlugin(),
                new webpack.optimize.CommonsChunkPlugin({
                    name: 'vendor',
                    filename: 'vendor.[hash].js',                    
                    minChunks: Infinity
                }),
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false,
                        screw_ie8: true,
                        conditionals: true,
                        unused: true,
                        comparisons: true,
                        sequences: true,
                        dead_code: true,
                        evaluate: true,
                        if_return: true,
                        join_vars: true
                    },
                    output: {
                        comments: false
                    }
                }),
                new webpack.LoaderOptionsPlugin({
                    options: {
                        postcss: [
                            autoprefixer({
                                browsers: [
                                    'last 3 version',
                                    'ie >= 10'
                                ]
                            })
                        ]
                    }
                }),
                new webpack.HashedModuleIdsPlugin(),
                new HtmlWebpackPlugin({
                    template: path.join(__dirname, 'index.html'),
                    path: buildPath,
                    excludeChunks: ['base'],
                    filename: 'index.html',
                    minify: {
                        collapseWhitespace: true,
                        collapseInlineTagWhitespace: true,
                        removeComments: true,
                        removeRedundantAttributes: true
                    }
                }),
                new PreloadWebpackPlugin({
                    rel: 'preload',
                    as: 'script',
                    include: 'all',
                    fileBlacklist: [/\.(css|map)$/, /base?.+/]
                }),                
                new ExtractTextPlugin({
                    filename: '[name].[contenthash].css',
                    allChunks: true
                }),
                new StyleExtHtmlWebpackPlugin({
                    minify: true
                }),
                /*new webpack.optimize.AggressiveMergingPlugin(),*/
                new webpack.NoEmitOnErrorsPlugin(),
                new CompressionPlugin({
                    asset: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
                    threshold: 10240,
                    minRatio: 0.8
                })
            ] :
            [];

        return {
            entry: ["babel-polyfill", ...DEV_WEBPACK_ENTRIES, __dirname + '/src/index.js', './src/js/classList.min.js', './src/js/jquery.nicescroll.min.js'],                          
            output: {
                filename: '[name].[hash].js',
                path: path.join(__dirname, 'dist'),
                publicPath: '/'
            },
            module: {
                rules: [{
                        test: /\.jsx?$/,
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            cacheDirectory: true,
                            presets: [...DEV_BABEL_PRESETS, ...PROD_BABEL_PRESETS, 'react'],
                            plugins: [
                                ...DEV_BABEL_PLUGINS,
                                ...PROD_BABEL_PLUGINS,
                                'syntax-dynamic-import',
                                'transform-class-properties', ['transform-es2015-classes', {
                                    loose: true
                                }]
                            ]
                        }
                    },
                    {
                        test: /\.css$/,
                        use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: "css-loader"
                        })
                    },

                    {
                        test: /\.(scss)$/,
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                    loader: 'css-loader', // translates CSS into CommonJS modules
                                },
                                'sass-loader' // compiles SASS to CSS
                            ]
                        })
                    },

                    {
                        test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
                        loader: 'imports?define=>false&this=>window'
                    },
                    {
                        test: /\.(gif|png|jpe?g|svg)$/,
                        use: ['file-loader?hash=sha512&digest=hex&name=build/images/[hash].[ext]', 'image-webpack-loader']
                    }
                ]
            },
            resolve: {
                modules: [path.resolve('./'), 'node_modules'],
                extensions: ['.js', '.jsx', '.css', 'scss'],
                alias: PROD_WEBPACK_ALIASES
            },
            plugins: [

                new HtmlWebpackPlugin({
                    template: path.join(__dirname, './dist/index.html'),
                    inject: 'body',
                    filename: 'index.html',                    
                }),

                new webpack.LoaderOptionsPlugin({
                    options: {
                        optipng: {
                            optimizationLevel: 7
                        },
                        gifsicle: {
                            interlaced: false
                        },
                        pngquant: {
                            quality: '65-90',
                            speed: 4
                        },
                        mozjpeg: {
                            quality: 65
                        }
                    }
                }),
                ...DEV_WEBPACK_PLUGINS,
                ...PROD_WEBPACK_PLUGINS
            ],
            devServer: {
                hot: env.dev,
                contentBase: __dirname,
                stats: 'errors-only',
                historyApiFallback: true
            },

            devtool: 'source-map',


            performance: {
                hints: false
            }
        };
    };

Any suggestions?

[b1tn3r]

Alright so this problem had been really aggravating for me for a long time. I was getting the same terrible error that everyone else has been getting:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

This error had been following me ever since I started using Webpack and I had to compromise with just using the node-sass-middleware , which does not bundle the way I want it to. I figured out an alternative around using the extract-text-webpack-plugin, which was causing the error for me with a conflicting plugin. Instead, I started using 'extract-loader' with 'file-loader', which only requires you to use loaders and no plugins are required. You need to install both.

Here is the client side webpack config I use to bundle css, scss, and bootstrap/bootswatch scss in the dependency tree:

rules: [
    {
        test: /\.(s*)css$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].css',
                    outputPath: 'stylesheets/'
                }
            },
            {
                loader: 'extract-loader'
            },
            {
                loader: 'css-loader',
                options: {
                    url: false,
                    minimize: true,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: function() {
                        return [
                            require('precss'),
                            require('autoprefixer')
                        ];
                    }
                }
            },
            {
                loader: 'sass-loader'
            }
        ]
    },
]

This alternative solution works exactly the same way as extract-text-webpack-plugin as far as I can tell, but if you are having issues with your config due to conflicting plugins, this method does not require plugins at all, so it should work for everyone.

I eventually found out that my problem was with my list of plugins, so if you are determined to get extract-text-webpack-plugin to work you might want to take a look at your plugins list, because it seems like this is where the problem lies. Debug it by removing all your plugins except the extract plugin, and also make sure your dev/prod conditionals are not getting in the way of your plugins list or your extract plugin from running when you are trying to run your config.

[Losses]

same issue...... anyone can help?