Cannot read properties of undefined (reading 'config') with vue-loader, css loader after install postcss

Question

I am working on the vue 2 project, it is working well before I installed the latest postcss library("postcss": "^8.4.21"). After I installed the postcss, the project is compiling with errors.

Syntax Error: TypeError: Cannot read properties of undefined (reading 'config')

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./client/App.vue?vue&type=style&index=0&id=278f674b&lang=scss& 4:14-425
 @ ./client/App.vue?vue&type=style&index=0&id=278f674b&lang=scss&
 @ ./client/App.vue
 @ ./client/main.js
 @ multi ./client/main.js

it seesms the problem with vue-loader, but looking at package.json, I had found no vue-loader package. This is the old package.json.

  "dependencies": {
    "animate.css": "^3.7.2",
    "await-timeout": "^1.1.1",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "cash-dom": "^8.1.0",
    "core-js": "^2.6.5",
    "crypto-js": "^3.1.9-1",
    "dom-to-image": "^2.6.0",
    "element-ui": "~2.13.0",
    "html3canvas": "^1.1.5",
    "js-shortid": "^0.1.1",
    "lodash": "^4.17.15",
    "nprogress": "^0.2.0",
    "qrcode.vue": "^1.6.3",
    "request": "^2.88.2",
    "swiper": "^6.3.5",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^4.1.1",
    "vue-clipboard2": "^0.3.1",
    "vue-cropper": "^0.4.9",
    "vue-router": "^3.0.3",
    "vue-swiper-component": "^2.1.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "art-template": "^4.13.2",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.12.2",
    "babel-preset-env": "^1.7.0",
    "chokidar-cli": "^3.0.0",
    "co": "^4.6.0",
    "debug": "^4.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "fs-extra": "^9.1.0",
    "html2canvas-proxy": "^1.0.1",    
    "node-sass": "^6.0.1",
    "nodemon": "^1.19.4",
    "psd": "^3.2.0",
    "pug": "^2.0.3",
    "sass-loader": "^10.0.1",
    "vue-template-compiler": "^2.6.10"
  }

Answer 1

vue-loader is included within vue-cli. If you look at your package-lock.json file, you should see it appear.

vue-loader only support postcss 7, it is sadly not compatible with postcss 8. (See issue #1798 on the postcss github repository)

Try to install this version to see if the build is fixed:

npm install --save-dev postcss@^7