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 constantDeclare
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 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