Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors

Question

I'm trying to upgrade an AngularJS (Angular 1) application using WebPack 2.1.0 beta 8 to WebPack 2.2.0 RC3 but I'm having issues with the ExtractTextPlugin.

I started from the following, working, setup:

module: {
  ...
  loaders: [{
    test: /\.(css|less)$/,
    loaders: ExtractTextPlugin.extract('style', 'css!postcss!less')
  }]
  ...
}
,
plugins: [
  new ExtractTextPlugin('styles/index-[contenthash].css')
]

The versions used in my package.json for this are:

"css-loader": "^0.23.1"
"less-loader": "^2.2.2"
"postcss-loader": "^0.9.1"
"style-loader": "^0.13.0",
"extract-text-webpack-plugin": "^1.0.1"
"webpack": "2.1.0-beta.8"

My webpack config has a few other loaders and plugins, but I currently am only facing issues with the ExtractTextPlugin. After upgrading my setup, I ended up with the following code:

module: {
  ...
  rules: [{
    test: /\.(css|less)$/,
    use: ExtractTextPlugin.extract(['css', 'postcss', 'less'])
  }]
  ...
}
,
plugins: [
  new ExtractTextPlugin('styles/index-[contenthash].css')
]

This configuration uses the following versions:

"css-loader": "^0.26.1"
"less-loader": "^2.2.3"
"postcss-loader": "^1.2.1"
"style-loader": "^0.13.1"
"extract-text-webpack-plugin": "2.0.0-beta.4"
"webpack": "2.2.0-rc.3"

The above configuration results in the following exceptions:

ERROR in ./src/index.less Module parse failed: D:...\node_modules\extract-text-webpack-plugin\loader.js?{"omit":0,"remove":true}!style-loader!css-loader!postcss-loader!less-loader!D:...\src\index.less Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. | /* 1. Import vendor styles / | | @import './index.vendor.less'; | | / 2. Import general styles */ @ ./src/index.ts 24:0-23 @ multi app

ERROR in ./~/animate.css/animate.css Module parse failed: D:...\node_modules\animate.css\animate.css Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @charset "UTF-8"; | | /*!

ERROR in ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css Module parse failed: D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } | .dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); max-height: 520px; position: relative; left: 50%; } | .dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3em; }

Apart from the above loader configuration, I also tried the following configuration but it didn't work neither:

use: ExtractTextPlugin.extract(['style-loader', 'css-loader', 'postcss-loader','less-loader'])

use: ExtractTextPlugin.extract({
       fallbackLoader: "style-loader",
       loader: "css-loader!less-loader"
})

I've removed my node_modules folder and installed everything from scratch, but this didn't help.

Note: Removing the ExractTextPlugin configuration and replacing it with the following does allow me to succesfuly build the application, so I'd say the rest of my webpack configuration has been succesfully migrated!

{
    test: /\.(css|less)$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'less-loader'
    ]
}

I've uploaded a sample to reproduce the issue: https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip

Steps to reproduce:

npm install
node_modules\ .bin\webpack.cmd --config conf\webpack.conf.js

I've also added a second config file which is working, without ExtractTextPlugin:

node_modules\ .bin\webpack.cmd --config conf\webpack.conf2.js

Any guidance in what I'm missing here is appreciated!

Thanks in advance.

Can you try upgrading extract to webpack 2 syntax as instructed in the readme? It will fail with the old one. — Juho Vepsäläinen
Isn't the first and 3th way the way the docs describe on github.com/webpack/extract-text-webpack-plugin? — Frederik Prijck
prntscr.com/dtqn4q ... (this is a bit different, as it's using multiple instances tho) The docs even use loaders, whereas, IIRC, I need to use rules. — Frederik Prijck
You might try removing the ^ from your project.json versions. There may be a newer version of your css-loader that is being downloaded and is not working properly. — Targaryen
If you execute the repro app (using the second config) you can see the css loader is working. But the version I'm using is the latest (0.26.1), so removing ^ shouldn't change that ... — Frederik Prijck

Frederik Prijck Frederik Prijck · Accepted Answer · 2017-01-20T22:18:00

It appeared to be an issue with ExtractWebpackPlugin and should have been fixed with the latest release: https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5.

I verified my reproduce app mentioned above is working when upgrading ETP to beta5 using the following syntax in my webpack.config file:

{ 
  test: /\.(css|less)$/, 
  loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader", "less-loader"]) 
}

Aswell as using the following syntax

{ 
    test: /\.(css|less)$/, 
    loader: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: ["css-loader", "postcss-loader", "less-loader"]
    }) 
},

Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors

1 Answers