mini-css-extract-plugin: Error: Cannot find module 'ajv/dist/compile/codegen'

Bug report

Actual Behavior

When trying to run webpack build a project with min-css-extract-plugin, it failed. [webpack-cli] Failed to load 'C:\Work\Projects\felleskatalogen\felleskatalogenweb-components\web-components-web\framework\webpack.config.js' config [webpack-cli] Error: Cannot find module 'ajv/dist/compile/codegen' I also saw WARN on npm install about ajv-keywords@5.1.0 requires a peer of ajv@^8.8.2 but none is installed. You must install peer dependencies yourself.

As I figured out, the version “2.4.5” depends on “schema-utils”: “^4.0.0” what depends on the “ajv-keywords”: “^5.0.0” what cause this problem.

Expected Behavior

The build should not thrown exeption, and the min-css-extract-plugin should use the right dependencies. The plugin version “2.4.4” works as expected.

How Do We Reproduce?

package.json

"scripts": {
    "build-prod": "node_modules/.bin/webpack --mode production"
  },
  "dependencies": {
    "@zxing/library": "^0.18.6",
    "core-js": "^3.19.2",
    "css-loader": "^6.5.1",
    "get-google-fonts": "^1.2.2",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.13.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mark.js": "^8.11.1",
    "mini-css-extract-plugin": "2.4.5",
    "promise-polyfill": "^8.2.1",
    "style-loader": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.3",
    "babel-polyfill": "^6.26.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1"
  }

webpack.config.json

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const GetGoogleFonts = require('get-google-fonts');
new GetGoogleFonts().download('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700', {
    outputDir:  process.env.WEBPACK_TARGET || path.resolve(__dirname, "dist")
});

module.exports = {
    entry: {
        framework: './js/framework.js',
        components: '../src/main/webapp/application/resources/less/component/component.less'
    },
    mode: 'production',
    devtool: 'source-map',
    output: {
        path: process.env.WEBPACK_TARGET || path.resolve(__dirname, "dist"),
        filename: '[name].min.js'
    },
    module: {
        rules: [{
            test: /\.m?js$/,
            use: {
                loader: "babel-loader"
            }
        }, {
            test: /\.less$/,
            exclude: /node_modules/,
            use: [{
                loader: MiniCssExtractPlugin.loader
            }, {
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            }, {
                loader: 'less-loader',
                options: {
                    sourceMap: true
                }
            }]
        }]
    },
    plugins: [new MiniCssExtractPlugin({
        filename: '[name].min.css'
    }), new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })]
};

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 19.41 GB / 31.92 GB
  Binaries:
    Node: 15.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.29), ChromiumDev (97.0.1072.8)
    Internet Explorer: 11.0.19041.1202
  Packages:
    babel-loader: ^8.2.3 => 8.2.3
    css-loader: ^6.5.1 => 6.5.1
    less-loader: ^10.2.0 => 10.2.0
    style-loader: ^3.3.1 => 3.3.1
    webpack: ^5.64.4 => 5.64.4
    webpack-cli: ^4.9.1 => 4.9.1