''' Solution - "extract-text-webpack-plugin" loader is used without the corresponding plugin | Modern JS

Solution - "extract-text-webpack-plugin" loader is used without the corresponding plugin

Description

Recurring problem in Webpack's extract-text-webpack-plugin package, used to extract CSS (Cascading Style Sheets) references from JavaScript sources and place all CSS in a global file.

Causes and Solutions

Cause
Solution
Steps
Using loaders instead of rules as part of a module configuration in Webpack 2.
In Webpack 2.1 you must switch loaders to rules as part of a module configuration.
# DON'T DO
module.exports = {
    //...
    module: {
        loaders: [
# DO
module.exports = {
    //...
    module: {
        rules: [
    	        
Declaring ExtractTextPlugin instance with constant
Declare ExtractTextPlugin instance with name variable
# DON'T DO
new ExtractTextPlugin ("style.css",
                        {allChunks: true}))
# DO
new ExtractTextPlugin("[name].css",
                        {allChunks: true})
    	        
Using ExtractTextPlugin in combination with HtmlWebpackPlugin and using underscore-template-loader as part of a template definition
Don't use underscore-template-loader as part of a template definition
# DON'T DO
new HtmlWebpackPlugin({
  template: 'underscore-template-loader!./src/index.html',
  ...
  });
# DO
new HtmlWebpackPlugin({
  template: './src/index.html',
  ...
  });
    	        
Using an old HappyPack plugin version
Upgrade to new HappyPack plugin version
New HappyPack version bug fix https://github.com/axa-ch/style-guide/pull/618
Using Node 6.0.0 or higher
Downgrade to a version of Node earlier than 6.0.0
# Check node version
node -v
# Clean up cache and install node 5.12.0
sudo npm cache clean -f
sudo npm install -g n
sudo n 5.12.0
# All node version numbers available at
# https://nodejs.org/en/download/releases/
# To return to latest stable Node version
# if previous solution didn't work do:
# sudo n stable