Can't Use MiniCssExtractPlugin in 12.2.x works in 12.1.x

[nawlbergs]

tldr;

MiniCssExtractPlugin works as expected wtih angular 12.1.x. If I use angular 12.2.x it tells me its not registered.. if I register it.. it tells me its already registered.

details

I'm trying to move to the latest version of angular 12... there are a lot of legacy css that just gets imported from some files in my common dir...
Heres my export with 12.1.x (it works):

// wepack.partial.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        include:[
          /common/
        ],
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: true }},
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                map: true,
                plugins: [
                  require('autoprefixer')
                ]
              },
            },
          },
          {
            loader:'less-loader',
            options: { sourceMap: true }}
        ],
      },
    ],
  }
};

If i upgrade my angular versions from 12.1.4 to 12.2.15 (latest for v12) I get....

../files/.../styles.less - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (C:\Users\alber\sites\af-client\public\portal\node_modules\mini-css-extract-plugin\dist\loader.js:51:14)

So naturally I...

// wepack.partial.js
module.exports = {
  plugins: [ new MiniCssExtractPlugin() ], // <----- added this
  module: {
    rules: [ 
      ...

But then i get

 Generating browser application bundles (phase: setup)...An unhandled exception occurred: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered
[error] Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered
    at Object.register (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\serialization\ObjectMiddleware.js:182:10)
    at Function.getCssModule (C:\Users\alber\sites\af-client\public\portal\node_modules\mini-css-extract-plugin\dist\index.js:182:34)
    at MiniCssExtractPlugin.apply (C:\Users\alber\sites\af-client\public\portal\node_modules\mini-css-extract-plugin\dist\index.js:389:44)
    at createCompiler (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\webpack.js:74:12)
    at create (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\webpack.js:127:16)
    at webpack (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\webpack.js:151:32)
    at Object.f [as webpackFactory] (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\index.js:55:16)
    at createWebpack (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:43:36)
    at Object.runWebpackDevServer (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:73:12)
    at SwitchMapSubscriber.project (C:\Users\alber\sites\af-client\public\portal\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:247:32)
    at SwitchMapSubscriber._next (C:\Users\alber\sites\af-client\public\portal\node_modules\rxjs\internal\operators\switchMap.js:47:27)
    at SwitchMapSubscriber.Subscriber.next (C:\Users\alber\sites\af-client\public\portal\node_modules\rxjs\internal\Subscriber.js:66:18)
    at C:\Users\alber\sites\af-client\public\portal\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

ps im using:

node: 12.22.9
npm: 7.24.2
"devDependencies": {
    "@angular-devkit/build-angular": "~12.1.4",
    "@angular/cli": "~12.1.4",
    "@angular/compiler-cli": "~12.1.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "del": "^6.0.0",
    "eslint": "^7.32.0",
    "gulp": "^4.0.2",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.2",
    "webpack-livereload-plugin": "^2.3.0"
  },
  "dependencies": {
    "@angular/animations": "~12.1.4",
    "@angular/common": "~12.1.4",
    "@angular/compiler": "~12.1.4",
    "@angular/core": "~12.1.4",
    "@angular/forms": "~12.1.4",
    "@angular/platform-browser": "~12.1.4",
    "@angular/platform-browser-dynamic": "~12.1.4",
    "@angular/router": "~12.1.4",
    "@angular/upgrade": "~12.1.4",
    "angular": "~1.8.2",
    "angular-animate": "~1.8.2",
    "angular-sanitize": "~1.8.2",
    "autoprefixer": "^7.2.6",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "gulp-concat": "^2.6.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "mini-css-extract-plugin": "^1.3.8",
    "ngx-build-plus": "^12.2.0",
    "postcss": "^8.3.5",
    "postcss-loader": "^4.3.0",
    "rxjs": "~6.6.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.3.0",
    "tslib": "^2.2.0",
    "tslint": "^6.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "zone.js": "~0.11.4"
  }

[axlroseart]

must add this config in ‘angular.json’:
"customWebpackConfig": { "path": "your-custom-webpack.config.js", "replaceDuplicatePlugins": true }