使用 animate.css 包在 npm 运行上解析 "Cannot read property 'unprefixed' of undefined"

Question

我正在使用 Vue、Quasar 和 animate.css 包开发一个应用程序，用于我网站上的 CSS 动画。一切都很顺利，直到最近我遇到了 npm run build 命令的问题，这导致了标题中的错误。经过一些调查，我尝试安装 postcss-rtlcss 包，这导致 npm run serve 上也发生了这个错误。请注意，我是 Vue 和 node.js 生态系统的新手，所以如果我做错了什么，请告诉我。

运行npm run serve

时的错误

ERROR  Failed to compile with 1 error                                                                                                                                          10:28:49 PM

error  in ./node_modules/animate.css/animate.css

Syntax Error: TypeError: Cannot read property 'unprefixed' of undefined


 @ ./node_modules/animate.css/animate.css 4:14-163 15:3-20:5 16:22-171
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.251:8080&sockPath=/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

除此之外，这是我的package.json。

{
  "name": "socialapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "animate.css": "^4.1.1",
    "core-js": "^3.6.5",
    "css-loader": "^6.2.0",
    "quasar": "^2.0.0",
    "vue": "^3.1.4",
    "vue-body-class": "^3.0.2",
    "vue-router": "^4.0.0-0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^4.45.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss-rtl": "^1.2.3",
    "sass": "1.32.12",
    "sass-loader": "^10.1.0",
    "vue-cli-plugin-quasar": "~4.0.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

如果您需要我提供任何其他信息，请在评论中告诉我，我会尽力提供。谢谢你的帮助。

Answer 1

我在 package.json 中将我的 PostCSS 版本降级到 ^7.0.36 解决了这个问题。虽然这可能会导致依赖关系树出现问题，但当我尝试使用 --force 参数进行安装时，它工作得很好。现在所有命令都可以正常工作。

Answer 2

如果您使用的是 postcss 版本 8，请确保您还拥有 postcss-preset-env 的最新版本，因为由于与低于 8

的版本相关的安全问题，您不想降级 postcss

"postcss-preset-env": "^7.2.3"

使用 animate.css 包在 npm 运行上解析 "Cannot read property 'unprefixed' of undefined"

Resolving "Cannot read property 'unprefixed' of undefined" on npm run serve with animate.css package

node.js

npm

animate.css

vue.js

使用 animate.css 包在 npm 运行 上解析 "Cannot read property 'unprefixed' of undefined"

Resolving "Cannot read property 'unprefixed' of undefined" on npm run serve with animate.css package

node.js

npm

animate.css

vue.js

使用 animate.css 包在 npm 运行上解析 "Cannot read property 'unprefixed' of undefined"