发现无效的 PostCSS 插件：[0]

Posted

技术标签:

【中文标题】发现无效的 PostCSS 插件：[0]【英文标题】：Invalid PostCSS Plugin found: [0] 【发布时间】：2018-01-04 11:31:19 【问题描述】：

我现在正在努力让我的 Spring Boot 应用程序再次工作......

我想将我的应用程序部署到 Heroku，但遇到了一个非常奇怪的错误：

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)

我搜索了一下，发现我的绑定可能不正确。所以我执行了

npm rebuild node-sass --force

为了正确设置它们。但这并没有帮助。从那以后，我收到了这个错误。

我还发现它与我的 postcss.config.js 有关，它是空的（它现在工作了 6 周）。所以我添加了一些插件。现在看起来像这样：

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

这也没有帮助。它仍然向我显示存在无效 postcss 插件的错误。 （postcss.conig.js 中的所有插件都是通过 npm 安装的）。

请在此处查看我的 package.json：


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

我现在正在搜索和尝试 3 天。任何帮助将不胜感激。

【问题讨论】：

请您分享您的 package.json 吗？ 当然。请在我的帖子中查看我的 package.json。 你看过这个了吗？它建议将您的 postcss-loader 版本更新为 1.3.3 github.com/davidtheclark/cosmiconfig/issues/… 非常感谢。我现在解决了这个问题。不幸的是，我不是 100% 的问题是什么，但我怀疑来自 node-sass 的绑定在某种程度上被破坏了。所以我所做的是：我删除了 node_modules 文件夹，安装了一个 yarn，然后运行了一个 yarn run webpack:build（新的构建非常重要。没有它就无法工作）。 【参考方案1】：

所以现在我又遇到了这个错误，并想确认 Dan Cancro 的回答成功了！

这正是我所做的（为了其他人，以免像我一样浪费时间）：

    我将 "postcss-loader": "1.3.0" 更改为 "postcss-loader": "1.3.3"

    已删除 /node_modules 文件夹

    已删除 package-lock.json 文件

    运行 npm install

    运行 yarn run webpack:build

这解决了我的问题。

【讨论】：

啊该死的。太棒了！

以上是关于发现无效的 PostCSS 插件：[0]的主要内容，如果未能解决你的问题，请参考以下文章

postcss-px-to-viewport 的 exclude 配置无效

由于 postcss，create-react-app 无法正常工作

Rollup 和 Post CSS - 自动为 React className 属性添加前缀

如何为 Angular 7 包含额外的 postCSS 插件（postcss-preset-env）

带有 Next.js 10.0.3 的 Tailwind CSS（PostCSS 插件）在开发环境中导致 Javascript 堆内存不足错误

错误：PostCSS 插件 autoprefixer 需要 PostCSS 8。更新 PostCSS 或降级此插件