Loader is used without the corresponding plugin error

[benregan]

I sure could use some help... 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 ( pasted below ). I did get scss source maps working finally, but now I can't get past my build because of this error. Any help would be greatly appreciated, I've been banging my head on this for days. ( I found a similar issue thread here, but I am very unfamiliar with webpack so far and not really sure how to begin troubleshooting. )

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

below is my exports.

module.exports = {

    cache: true,

    entry: {
        app: appEntryPoints
    },

    output: {
        path: path.join(__dirname, 'www'),
        filename: '[name].js',
        chunkFilename: '[chunkhash].js'
    },

    devtool: 'source-map',

    devServer: {
        contentBase: 'www/',
        port: 8100
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: [
                    path.resolve(__dirname, 'src'),
                    /ionic-framework[\/\\]index\.js/i,
                    /angular-ios9-patch/i
                ],
                exclude: es5Patterns
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.html$/,
                loader: 'raw'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader',
                    'css-loader?sourceMap!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
            },
            {
                test: /\.(ttf|otf|eot|svg|woff2?)(\?.+)?$/,
                loader: 'url',
                query: {
                    limit: 10000
                }
            },
            {
                //IMAGE LOADER
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file'
            },
        ],
        noParse: es5Patterns
    },

    plugins: [
        new webpack.DefinePlugin({
            APP_ENV: JSON.stringify(appEnvironment),
            BUILD_TARGET: JSON.stringify(target)
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            BUILD_TARGET: target
        }),
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]

};

[kevinSuttle]

This just started happening out of nowhere with me, too. I didn't add any new modules. Not sure what changed, to be honest.

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        },
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules")
      },
      {
        test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
      },
    ],
    resolve: {
      extensions: ['', '.js', '.json', '.css']
    },
    plugins: [
      new ExtractTextPlugin('TextInputs/TextInputs.css', { allChunks: true } ),
      new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        server: { baseDir: ['.'] },
        reload: false
      })
    ],
  }
}

[kevinSuttle]

Happens anytime I'm trying to import a CSS file in my JS module.

Both var css = require("css!./TextInputs.css"); or import styles from './TextInputs.css'; causes this error.

Commenting that line out causes Webpack to run, but the server to not kick off, even with webpack --watch.

[floross]

I got the same issue since I updated my node version to 6.0.0. When I fallback to an earlier version (like 5.x.x or 4.x.x), my code works as expected.

[kevinSuttle]

@floross Ohhhh. I didn't even think of that.

[facejiong]

I got the same issue with you @floross

[max-mykhailenko]

Have this problem with node 6.0.0, with 5.4.1 works fine

[fiture]

I got the same issue in node v6.1.0~

[agileago]

me too at node v6.1.0

[pandada8]

@max-mykhailenko
@agileago
@fiture
@kevinSuttle
@floross
@facejiong
Hey, are you using something like npminstall, pnpm or ied with node6 ? it seems #186 is the related bug.

[max-mykhailenko]

@pandada8 I use simple npm install command

[pandada8]

@max-mykhailenko interesting, in my test, the original npm install works well, at least with the simplest test.

[max-mykhailenko]

@pandada8 npm install works good, but webpack build fails.

[pandada8]

node changed the way handling symlinked modules in the node 6.0.0, and reverted default behaviour in 6.2.
if you have:

1. node >= 6.0 and <= 6.1
2. install the modules using npm alternatives (ied, npminstall, pnpm)
3. or having symlinked extract-text-webpack-plugin (should not happened in the normal npm install case)
4. and your webpack build is failing

try upgrading your node to 6.2
for detail see #186 (comment)

[alexander-akait]

@pandada8 i have node 6.2 and got this error.

[tiye]

6.2 works for me.

=>> uname -a
Darwin chen 15.5.0 Darwin Kernel Version 15.5.0: Tue Apr 19 18:36:36 PDT 2016; root:xnu-3248.50.21~8/RELEASE_X86_64 x86_64

[pandada8]

@evilebottnawi @max-mykhailenko would you mind providing some examples of your configs?

[alexander-akait]

@pandada8

{
loader: ExtractTextPlugin.extract(
    'style-loader',
    `css-loader?${JSON.stringify({
        sourceMap: DEBUG,
        // CSS Modules https://github.com/css-modules/css-modules
        // modules: true,
        // localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        // CSS Nano http://cssnano.co/options/
        minimize: false,
        camelCase: true,
        url: false,
        'import': false
    })}`,
    'postcss-loader',
    `sass-loader?${JSON.stringify({
        sourceMap: DEBUG,
        config: 'sassConfig'
    })}`
)
}

[pandada8]

@evilebottnawi I think ExtractTextPlugin.extract only receive two parameters, maybe you should just use an array to wrap your css loaders ?

[noyobo]

I got the same issue in node v6.1.0

upgrade to v6.2.0 it works

loaders : [{
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(
          'style-loader', 'css-loader!less-loader'
        )
      }, {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader', 'css-loader'
        )
      }]

[benregan]

I believe this has been resolved!! Thanks for all the help and comments!

[monokrome]

I'm getting this on node 6.2.1. Is it possible that the issue has returned? Loader definition is as follows:

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

[blemoine167]

Same problem here with 6.2.2, tried with npminstall and pnpn with no success.

var cssLoadersDev = ExtractTextPlugin.extract(
    'style-loader',
    'css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader'
)

[robhadfield]

Yep - 6.2.2 still happening for me. Any resolution?

EDIT: Updated to 6.3.0 - still the same.

[ibufu]

node v6.2.2, fail

[ibufu]

I found a reason caused by happypack.

[ephor]

I agree with @ibufu. I want to speed up the stylus build with happypack, but got this error. Node v 6.4.0

[monokrome]

I don't think that I was using happypack and still had the issue... Not sure if that's helpful or not

[GarryFlemings]

Windows 10
Node v6.2.0.
extract-text-webpack-plugin v1.0.1. No happypack anywhere.

webpack.config.js:
...
let ExtractTextPlugin = require("extract-text-webpack-plugin")
...
entry: [
"./app/example.css",
...
]
...
module: {
loaders: [
{
test: /.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
....
],
plugins: [
new ExtractTextPlugin("styles.css")
],
...
}

index.html: parens for angle brackets
(head)
...
(link href="./ProgramJS.css" rel="stylesheet" type="text/css" /)
...
(/head)
...
(/html)

example.js:
...
require("./ProgramJS.css") // grasping at straws, doesn't seem right
...

result:
ERROR in ./app/example.css
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:\path\to\local\node_modules\extract-text-webpack-plugin\loader.js:21:9)
@ multi main

[GarryFlemings]

Issue 24 is closed because of 50.

Issue 50 is closed because of 24.

Issue 73 is closed because it was marked a "question". It suggests the problem might be location of node_modules: don't use /Users/${userName}/node_modules. For my case, I'm not.

Issue 173 (this one) suggests the problem may be interaction with happypath. For my case, I don't have it on my system. I'm not aware of ever having had it.

There's suggestion to downgrade Node to before 6.0.0.

Any chance of another option? Workaround?

[GarryFlemings]

New report; I hope this helps someone.

This condition remains for me; I cannot use extract-text-webpack-plugin.

On the other hand, the urgency has gone way down for me. I substituted the following configuration:

webpack.config.js:
...
// let ExtractTextPlugin = require("extract-text-webpack-plugin")
...
entry: [
"./app/example.css",
...
]
...
module: {
loaders: [
{
test: /.css$/,
loader: "style-loader!css-loader"
},
....
],
// plugins: [
// new ExtractTextPlugin("styles.css")
// ],
...
}

index.html: (no change from above)

example.js:
...
// require("./ProgramJS.css") // caused syntax errors
...

Initially, I got an error message that I didn't document. I don't know what else I did, or otherwise why it suddenly started working, but it's working. This is a viable workaround for me and for now.

[kl2karpenko]

I had this problem because I din't have less or scss file included in=n my scripts, think this causes an error because it can't find a file to test

[csawtelle]

This happened for me whenever I was using styleUrl: something.css inside my angular2 components.

[edap]

This is still happening. This is my actual configuration

var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
{
     test: /\.scss$/i, loader: ExtractTextPlugin.extract('css!sass')
},

[jboothe]

I resolved this with the addition of include in the rules test object. Hope this helps someone.

rules: [
       // . . . 
        { 
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['to-string-loader', 'css-loader', 'postcss-loader'],
          }),
         // NOTE: Omitting 'include' causes plugin error
          include: [helpers.root('src', 'styles')]
        },
       // . . .
      ]

[Coreusa]

Had this issue on Node 7.2.0. Downloaded the 6.11.0 version and suddenly it worked.

[steve-todorov]

It doesn't seem to be related to the version of Node. I also had 7.2 and downgrading to 6.11 didn't solve the problem for me.

[hhhluke]

node v8.9.4,fail

[jrjacobs24]

I am experiencing this issue as well with trying to use scss. I installed it the other day and it was working. Switched branches, came back, and then it started showing up. My team is using yarn v0.27.5. I have installed node-sass, style-loader, css-loader, and sass-loader. Not sure what else the error could be referring to. Any help or insight is appreciated.

The relevant portion of our webpack.config is:

module: {
    rules: [
      // ...
      {
        test: /\.(s*)css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        })
      },
      // ...
  },

Error:

ERROR in ./assets/scss/root.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 (/Users/path/to/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)

(the path above was updated to path/to for redaction purposes)

[Jonarod]

@jrjacobs24 did you finally get it to work somehow? I have the same issue happening...

[jrjacobs24]

@Jonarod I'm sorry, man but I honestly can't remember how I got it working. Somehow I did and just kept plowing ahead because I was so excited haha This was also about a month ago. I'm pretty sure I attempted some uninstalling and reinstalling. FWIW here's what my final setup looked like:

module: {
    rules: [
      // ...
      {
        test: /\.(s*)css$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  minimize: false,
                  sourceMap: true,
                  importLoaders: 2
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: true,
                  config: { ctx: { env } }
                }
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true,
                  outFile: 'scss/build/',
                  outputStyle: 'expanded',
                  precision: 20
                },
              }
            ],
          })
      },
      // ...
  },
// ...
plugins: [
      // Output our compiled Scss to a stylesheet
      new ExtractTextPlugin({
        filename: 'scss/build/styles.css',
        allChunks: true
      })
],

[Jonarod]

@jrjacobs24 Aaaaah.Got it working thanks !!!!! I doubled-checked my webpack config and thought it was already coming with the plugins part... except it wasn't. Adding the plugins:[...] bit lead me to success !! Thanks again :)

[jrjacobs24]

@Jonarod That's awesome, man! Almost didn't include that part, but I'm glad I did!

[ohhoney1]

have this problem too. I solve it by add option exclude: /node_modules/. cause load style files from node_modules when there is a conflict

import Vue from 'vue'

import 'normalize/normalize.css' // causes this error

import ElementUI from 'element-ui'
import '@/styles/theme/index.css' // this way works

import '@/styles/index.scss' // this way works