Error with webpack using css-loader and text-extract-webpack-plugin

Question

I am using webpack@2.2.0-rc.3 and extract-text-webpack-plugin@2.0.0-beta.4 and I have the following webpack config:

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

module.exports = {
  entry: {
    app: './source/app.js',
    vendor: './source/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, './.tmp/dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [{
      test: /\.css/,
      use:[ ExtractTextPlugin.extract({
        loader: ["css-loader"],
      })],
    }],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "[name].[chunkhash].css",
      allChunks: true,
    })
  ]
};

In the vendor.js file I have this code:

require("./asdf.css")

And in the asdf.css code I simply have

body {
    background: yellow;
}

That's a pretty simple setting, yet I get this error when running webpack:

ERROR in ./source/asdf.css
Module build failed: ModuleParseError: Module parse failed: /home/vagrant/dorellang.github.io/source/asdf.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|     background: yellow;
| }
    at /home/vagrant/dorellang.github.io/node_modules/webpack/lib/NormalModule.js:210:34
    at /home/vagrant/dorellang.github.io/node_modules/webpack/lib/NormalModule.js:164:10
    at /home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at Array.<anonymous> (/home/vagrant/dorellang.github.io/node_modules/loader-runner/lib/LoaderRunner.js:197:4)
    at Storage.finished (/home/vagrant/dorellang.github.io/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:15)
    at /home/vagrant/dorellang.github.io/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:69:9
    at /home/vagrant/dorellang.github.io/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./source/vendor.js 2:0-21

What am I doing wrong?

score 0 · Answer 1 · answered Jan 14 '17 at 20:34

You're not loading the css file, that's why you get the error. Try to replace rules this into your webpack.congif.js like this:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  ...  ...  ...
  module: {
    loaders: [
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'ur path here')
    },
    { 
      test: /\.css$/, 
      include: path.join(__dirname, 'ur path here'),
      loader: 'style-loader!css-loader'
    }
    ]
  }
};

score 0 · Answer 2 · answered Jan 19 '17 at 20:38

Even though "use" is supposed to replace (and be identical to) "loader" in Webpack 2.2.0, this does not appear to be the case.

It doesn't seem that you can use "use" yet with ExtractTextPlugin. Additionally, it doesn't seem that you can use an array value for "loader" (in place of "use").

If you replace this bit of code:

use:[ ExtractTextPlugin.extract({
    loader: ["css-loader"],
})],

With this:

loader: ExtractTextPlugin.extract({
    loader: ["css-loader"],
}),

..it should work. (That replacement worked for my similar broken test-case.)

It looks like the main related issue is https://github.com/webpack/extract-text-webpack-plugin/issues/265

Error with webpack using css-loader and text-extract-webpack-plugin

2 Answers2