Invalid PostCSS Plugin found: [0]

Question

I'm struggling now for days getting my Spring Boot App to work again...

I wanted to deploy my application to Heroku and I got a really strange error:

Uncaught Error: Module build failed: TypeError: Invalid PostCSS Plugin found: [0]
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at Object.module.exports.createDebug.debug.createDebug.default (http://localhost:8080/vendor.dll.js:94862:7)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.module.exports (http://localhost:8080/vendor.dll.js:112728:15)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.defineProperty.value (http://localhost:8080/vendor.dll.js:94506:84)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.24 (http://localhost:8080/app/main.bundle.js:13268:42)
at __webpack_require__ (http://localhost:8080/app/manifest.bundle.js:694:30)
at fn (http://localhost:8080/app/manifest.bundle.js:115:20)
at Object../src/main/webapp/app/app.module.ts (http://localhost:8080/app/main.bundle.js:3641:1)

I googled and found out that my bindings are possibly not correct. So I executed

npm rebuild node-sass --force

in order to set them correctly. But that did not help. Since then I'm getting this error.

I also found hints that it has something to do with my postcss.config.js, which was empty (it worked like that for 6 weeks now). So I added some plugins. It looks like this now:

module.exports = {
  parser: require('postcss-scss'),
  plugins: [
        require('postcss-sassy-mixins'),
        require('precss'),
        require('autoprefixer')
    ]
}

Also that didn't help. it still shows me the error that there's that invalid postcss plugin. (All those plugins in the postcss.conig.js are installed via npm).

Please see my package.json here:

{
  "name": "coinlender",
  "version": "0.0.0",
  "description": "Description for coinlender",
  "private": true,
  "cacheDirectories": [
    "node_modules"
  ],
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "4.1.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "ng-jhipster": "0.2.6",
    "ng2-webstorage": "1.8.0",
    "ngx-cookie": "1.0.0",
    "ngx-infinite-scroll": "0.4.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.0",
    "swagger-ui": "2.2.10",
    "sockjs-client": "1.1.4",
    "webstomp-client": "1.0.6",
    "tether": "1.4.0",
    "zone.js": "0.8.11",
    "ngx-ui-switch": "^1.3.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "4.1.3",
    "@types/jasmine": "2.5.47",
    "@types/node": "7.0.22",
    "add-asset-html-webpack-plugin": "1.0.2",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.1.3",
    "browser-sync": "2.18.12",
    "browser-sync-webpack-plugin": "1.1.4",
    "codelyzer": "2.1.1",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.3",
    "del": "2.2.2",
    "event-stream": "3.3.4",
    "exports-loader": "0.6.4",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "generator-jhipster": "4.5.6",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.28.0",
    "jasmine-core": "2.6.2",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-coverage": "1.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-notify-reporter": "1.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "lazypipe": "1.0.1",
    "lodash": "4.17.4",
    "map-stream": "0.0.7",
    "merge-jsons-webpack-plugin": "1.0.6",
    "phantomjs-prebuilt": "2.1.14",
    "proxy-middleware": "0.15.0",
    "rimraf": "2.6.1",
    "run-sequence": "1.2.2",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.1.3",
    "style-loader": "0.16.1",
    "to-string-loader": "1.1.5",
    "tslint": "4.5.1",
    "tslint-loader": "3.5.3",
    "typescript": "2.3.3",
    "webpack": "2.6.1",
    "webpack-dev-server": "2.4.5",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-visualizer-plugin": "0.1.11",
    "web-app-manifest-loader": "0.1.1",
    "write-file-webpack-plugin": "3.4.2",
    "xml2js": "0.4.17",
    "sass-loader": "5.0.1",
    "node-sass": "4.5.3",
    "postcss-loader": "1.3.0",
    "yargs": "6.6.0"
  },
  "engines": {
    "node": ">=6.9.0"
  },
  "scripts": {
    "lint": "tslint 'src/main/webapp/app/**/*.ts'",
    "lint:fix": "tslint 'src/main/webapp/app/**/*.ts' --fix",
    "ngc": "ngc -p tsconfig-aot.json",
    "cleanup": "rimraf target/{aot,www}",
    "start": "yarn run webpack:dev",
    "webpack:dev": "webpack-dev-server --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
    "webpack:build:vendor": "webpack --config webpack/webpack.vendor.js --progress --profile",
    "webpack:build:dev": "webpack --config webpack/webpack.dev.js --progress --profile",
    "webpack:build": "yarn run cleanup && yarn run webpack:build:vendor && yarn run webpack:build:dev",
    "webpack:prod": "yarn run cleanup && webpack -p --config webpack/webpack.vendor.js --progress --profile && webpack -p --config webpack/webpack.prod.js --progress --profile",
    "webpack:test": "yarn run test",
    "test": "yarn run lint && karma start src/test/javascript/karma.conf.js",
    "test:watch": "karma start src/test/javascript/karma.conf.js --watch",
    "postinstall": "node node_modules/phantomjs-prebuilt/install.js"
  }
}

I'm searching and trying for 3 days now. Any help would be greatly appreciated.

Answer 1

So now I got this error again, and wanted to confirm that the answer of Dan Cancro did the trick!

Here's exactly what I did (for others in order not to waste as much time as I did):

1. I changed "postcss-loader": "1.3.0" to "postcss-loader": "1.3.3"

2. Deleted /node_modules folder

3. removed package-lock.json file

4. ran npm install

5. ran yarn run webpack:build

That solved the issue for me.