Invalid PostCSS Plugin Found: [0]

I have been scared now for several days to get my Spring Boot application working again ...

I wanted to deploy my application to Heroku and I got a 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 might not be correct. Therefore, I performed

npm rebuild node-sass --force

      

to install them correctly. But it did not help. I have been getting this error ever since.

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

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

      

And it didn't help. it still shows me the error that there is this invalid postcss plugin in there. (All these plugins in 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 have been searching and trying for 3 days. Any help would be greatly appreciated.

+3


source to share


1 answer


So now I got this error again and wanted to confirm that Dan Canro's answer did the trick!

Here's what I did (for others, so as not to waste as much time as I did):



  • I changed "postcss-loader": "1.3. 0 " to "postcss-loader": "1.3. 3 "

  • Remote folder / node_modules

  • removed package-lock.json file

  • run npm install

  • run yarn run webpack: build

This solved the problem for me.

+15


source







All Articles