loader is used without the corresponding plugin

[mschipperheyn]

I'm using import styles from './style.css' style imports.

I've been beating myself over the head trying to solve this error the last couple of days.

Error: Child compilation failed: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

In the end, it turns out that the error in my case was very misleading. I had one of the css files that had a style like this: .someStyle .someOtherStyle{ ....}

This caused the problem. In fairness, the error did indicate the module where the problem occurred, but I just didn't get it. If possible, would be nice to give a hint "Could it be that your style syntax is wrong?" or something like that. As it is, the error focused my attention on webpack config itself

[michael-ciniawsky]

Is this issue now resolved or not ? :) Please post your webpack.config.js and the file.css in question and feel free to reopen in case it's not. Syntax Errors are out of scope for this plugin as it never parses the contents itself. The misleading Error origins from a failing loader somewhere in your loaders chain, which breaks the loader side of the plugin.

[fakkeldij]

I am having the same issue,

below my webpack.config.js

``'use strict';

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

`>module.exports = { module: {rules: [ { test: /.pug$/, use: [ 'pug-loader?self'] }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new UglifyJSPlugin(), new ExtractTextPlugin('css/[name]-[contenthash:8].css')

] }; ``

on using

"styles": ["styles.css", "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", "../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/primeng/resources/primeng.min.css" ]

the above message appears when trying to do:

ng build --prod it works on ng serve and also when I delete all the styles.

package json

{ "name": "mean-chat", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "node ./bin/www", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "stop": "node server.stop.js", "serve": "lite-server -c=sk-config.json" }, "private": true, "dependencies": { "@angular/animations": "^5.0.0", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/compiler-cli": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/material": "^5.0.0-rc0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "@types/angular": "^1.6.39", "@types/core-js": "^0.9.43", "@types/jasmine": "^2.6.3", "@types/node": "^8.0.49", "@types/quill": "^1.3.3", "@types/selenium-webdriver": "^2.53.42", "angular-polyfills": "^1.0.1", "angular2-token": "^0.2.0-beta.12", "async": "^2.6.0", "bcrypt": "^1.0.3", "bcrypt-nodejs": "0.0.3", "bcryptjs": "^2.4.3", "body-parser": "^1.18.2", "bootstrap": "^3.3.7", "build": "^0.1.4", "classlist.js": "^1.1.20150312", "concurrently": "^3.5.0", "connect-flash": "^0.1.1", "consolidate": "^0.14.5", "cookie-parser": "^1.4.3", "core-js": "^2.4.1", "cors": "^2.8.4", "cryptocoins-icons": "^2.6.0", "express": "^4.16.2", "express-session": "^1.15.6", "flash": "^1.1.0", "font-awesome": "^4.7.0", "hooks": "^0.3.2", "hooks-fixed": "^2.0.2", "httpclient": "^0.1.0", "intl": "^1.2.5", "jsonwebtoken": "^8.1.0", "mongodb": "^2.2.33", "mongoose": "^4.13.2", "mongoose-role": "^2.0.1", "mongoose-upsert": "^1.0.1", "morgan": "^1.9.0", "ng2-currency-mask": "^4.4.1", "ngx-quill-editor": "^2.2.2", "passport": "^0.4.0", "passport-jwt": "^3.0.1", "passport-local": "^1.0.0", "primeng": "^5.0.2", "q": "^1.5.1", "react-npm-horizontal-status-indicator": "^1.3.0", "rxjs": "^5.5.2", "serve-favicon": "^2.4.5", "web-animations-js": "^2.3.1", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "^1.6.0", "@angular/compiler-cli": "^5.1.0-beta.0", "@angular/language-service": "^4.4.6", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "^8.0.53", "codelyzer": "^3.2.2", "file-loader": "^1.1.5", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "^2.4.2", "webpack": "^3.8.1" } }

[fakkeldij]

This problem is solved, I figured that the warning mentions that there was an issue with a child component. I had a look through all my components and noticed that I had duplicate entries for the .css files. So I had the css fiels in my json styles as well as in the component styles.