Cannot read property 'query' of undefined extract-text-webpack-plugin

Question

I'm trying to implement extract-text-webpack-plugin using webpack 2 and I'm building my webpack.config.js from scratch. When I wanted to add the plugin I followed the instructions on npm. This however gives me the following error:

TypeError: Cannot read property 'query' of undefined

I've looked around and didn't catch anyone else having the same problem with this plugin. I'd rather first ask if I've maybe made a mistake before assuming this is a bug.

My webpack.config.js is

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './main.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
        }]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ],
};

and the full error is

/node_modules/extract-text-webpack-plugin/index.js:134
    if(!loader.query) return loader.loader;
              ^

TypeError: Cannot read property 'query' of undefined
    at getLoaderWithQuery (/node_modules/extract-text-webpack-plugin/index.js:134:12)
    at Array.map (native)
    at Function.ExtractTextPlugin.extract (/node_modules/extract-text-webpack-plugin/index.js:201:4)
    at Object.<anonymous> (/webpack.config.js:33:32)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)

Arda

Answer 1

You're using an outdated version of extract-text-webpack-plugin, this has been removed before the first release candidate of v2.0.0. You probably have a beta version.

Install the latest version with:

npm install --save-dev extract-text-webpack-plugin@latest

Or with Yarn you can run:

yarn upgrade extract-text-webpack-plugin

Pyrogenic

I assumed by following their guide on npm I would get the most recent version? under "install" it says, for webpack2; npm install --save-dev extract-text-webpack-plugin so I assumed that that would be fine. Thanks! – Arda

It should, but if you had it installed already, npm will respect the semantic versioning scheme. So if it was an exact version (without ^), it will just stay at that version. Is not exactly what you would expect. Yarn behaves differently when adding a dependency and will always use the latest version regardless of the current one. – Pyrogenic

if there is a .css file in my project, then the plugin should make a new .css file out of it, right? Because it's not generating anything right now... – Arda

That should technically be an entire new question, but only the CSS which is loaded by webpack will get extracted (webpack doesn't care about all files, just the ones that are imported). So import the CSS in your JavaScript files. – Pyrogenic

Answer 2

I had the exact same issue. Note that webpack 2.x only works with extract-text-plugin version 2.1.2 For webpack 3, use version 3.0.0

Repose