Upgrading to postcss-loader 5.0.0 causes TypeError: this.getOptions is not a function

[DamianPereira]

• Operating System: Manjaro Linux
• Node Version: 14.3.0
• NPM Version: 6.14.7
• webpack Version:
  • webpack 4.46.0
  • webpack-cli 4.5.0
  • webpack-dev-server 3.11.2
• postcss-loader Version: 5.0.0

Expected Behavior

Webpack should build

Actual Behavior

The following error appears:

    ERROR in ./src/app/styles/vendor.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/dist/cjs.js??ref--9-2!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/vendor.scss)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: this.getOptions is not a function
        at Object.loader (/home/damian/Proyects/Hoopla/web_static/node_modules/postcss-loader/dist/index.js:38:24)

Code

Webpack config files:
https://gist.github.com/DamianPereira/a81744c9dea6ac4a96a5e10b972b080d
https://gist.github.com/DamianPereira/94c5b5f7ec6a4a9a17d01062bef3f6ab

package.json dependencies:

  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/preset-env": "7.0.0",
    "@fortawesome/fontawesome-pro": "^5.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/pro-regular-svg-icons": "^5.14.0",
    "@fortawesome/pro-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.12",
    "@simbathesailor/use-what-changed": "^0.1.25",
    "@storybook/addon-actions": "^6.1.5",
    "@storybook/addon-backgrounds": "^6.1.10",
    "@storybook/addon-links": "^6.1.5",
    "@storybook/addons": "^6.1.5",
    "@storybook/react": "^6.1.5",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/react-hooks": "^3.4.2",
    "@testing-library/user-event": "^12.1.10",
    "@types/classnames": "^2.2.10",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.158",
    "@types/qs": "^6.9.4",
    "@types/react": "^16.9.54",
    "@types/react-dom": "^16.9.9",
    "@types/react-outside-click-handler": "^1.3.0",
    "@types/react-transition-group": "^4.4.0",
    "@types/uuid": "^8.3.0",
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
    "@webpack-cli/serve": "^1.3.0",
    "angular-template-url-loader": "1.0.2",
    "angularjs-testing-library": "^4.0.0",
    "apply-loader": "2.0.0",
    "autoprefixer": "^8.4.1",
    "babel-loader": "8.2.2",
    "babel-plugin-angularjs-annotate": "^0.10.0",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "3.0.0",
    "copy-webpack-plugin": "4.5.2",
    "css-loader": "^5.0.1",
    "css-modules-typescript-loader": "^4.0.1",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jest-dom": "^3.2.4",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "exports-loader": "0.7.0",
    "extension-replace-loader": "0.0.1",
    "extract-loader": "2.0.1",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^5.2.0",
    "friendly-errors-webpack4-plugin": "2.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "^4.5.1",
    "identity-obj-proxy": "^3.0.0",
    "jade": "~1.8.1",
    "jade-html-loader": "0.0.3",
    "jade-loader": "0.8.0",
    "jest": "^26.6.1",
    "jest-runner-eslint": "^0.10.0",
    "mini-css-extract-plugin": "1.3.5",
    "moment": "2.11.1",
    "ngtemplate-loader": "2.0.1",
    "node-sass": "^4.14.1",
    "null-loader": "0.1.1",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "postcss-loader": "^5.0.0",
    "postcss-prefixwrap": "^1.16.0",
    "prettier": "^2.0.5",
    "raw-loader": "^0.5.1",
    "react-docgen-typescript-loader": "^3.7.2",
    "react-test-renderer": "^17.0.1",
    "sass-loader": "^7.3.1",
    "simple-progress-webpack-plugin": "1.1.2",
    "source-map-loader": "^2.0.0",
    "string-replace-webpack-plugin": "^0.1.3",
    "style-loader": "^2.0.0",
    "stylelint": "13.7.1",
    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recommended-scss": "4.2.0",
    "stylelint-prettier": "^1.1.2",
    "stylelint-scss": "3.18.0",
    "stylelint-webpack-plugin": "2.1.0",
    "ts-jest": "^26.4.3",
    "ts-loader": "^8.0.14",
    "ts-transformer-keys": "^0.4.2",
    "typed-classnames-loader": "^1.1.0",
    "typescript": "^4.0.5",
    "webpack": "^4.46.0",
    "webpack-bundle-analyzer": "4.4.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "4.1.4",
    "whatwg-fetch": "^3.4.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-pro": "^5.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/pro-duotone-svg-icons": "^5.14.0",
    "@fortawesome/pro-light-svg-icons": "^5.14.0",
    "@fortawesome/pro-regular-svg-icons": "^5.14.0",
    "@fortawesome/pro-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.12",
    "@hookform/error-message": "0.0.4",
    "@types/angular": "^1.7.0",
    "@uirouter/angularjs": "0.3.0",
    "angular": "1.3.4",
    "angular-animate": "1.3.4",
    "angular-cookies": "1.3.20",
    "angular-local-storage": "0.2.7",
    "angular-messages": "1.3.20",
    "angular-moment": "1.2.0",
    "angular-motion": "0.4.4",
    "angular-progress-arc": "^1.0.0",
    "angular-recaptcha": "3.2.1",
    "angular-resource": "1.3.20",
    "angular-sanitize": "1.3.20",
    "angular-strap": "2.3.8",
    "angular-touch": "1.3.20",
    "angular-ui-select2": "0.0.5",
    "angulartics": "1.6.0",
    "angulartics-google-analytics": "0.1.3",
    "bootstrap": "^3.3.7",
    "bootstrap-multiselect": "0.9.13-1",
    "bootstrap-sass": "3.3.7",
    "bootstrap-switch": "3.3.2",
    "bootstrap4": "npm:bootstrap@^4.5.3",
    "classnames": "^2.2.6",
    "croppie": "2.6.2",
    "fancy-textfill": "^1.2.5",
    "hoopla-common": "git+ssh://git@github.com/hoopla-software/angular_common.git#1.2.0",
    "intro.js": "2.9.3",
    "jquery": "3.5.1",
    "jquery-ui": "1.12.1",
    "jstimezonedetect": "1.0.5",
    "lodash": "4.13.1",
    "moment": "2.11.1",
    "moment-timezone": "0.5.31",
    "msw": "^0.21.2",
    "ng-file-upload": "3.2.4",
    "ng-idle": "1.3.2",
    "ngreact": "^0.5.2",
    "npm": "^6.14.7",
    "numeral": "1.5.3",
    "react": "17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.9.6",
    "react-minimal-pie-chart": "^8.0.1",
    "react-outside-click-handler": "^1.3.0",
    "select2": "3.5.1",
    "tiny-slider": "^2.8.7",
    "typeahead.js": "0.11.1",
    "ui-select": "0.19.6",
    "uuid": "^8.3.0"
  }}

How Do We Reproduce?

It seems pretty difficult to create a test repository, since I believe it is related to some of my angularjs dependencies and outdated loader-utils could be causing this. (we are migrating to react, so both apps cohexist). Is it possible that the wrong version of loader-utils is loaded?

[DamianPereira]

I added a debugger in postcss-loader and checked what "this" value was, Here's an image:

This does not have getOptions available.

[alexander-akait]

You need webpack@5 to use the latest version, please read CHANGELOG before updating, it is good practice, also do not ignore messages (i.e. warnings) from your package manager (it should say about problems with peer deps)

[DamianPereira]

Sorry! I thought I read most changelogs of all the things I upgraded, but missed that. I think 5.0.0 got released between when I read the changelog and actually upgraded with npm-check-updates.

Sadly I have a huge amount of warnings, but I have to live with them because I must have both react and angular 1.3.4 coexisting in the same project, at least until the migration to react is ready. I'll try to re-check changelogs before reporting issues in the future.