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

[nooxx]

@alexander-akait @stevesum I’ve found a workaround by installing ajv manually npm i ajv@latest

Sorry I don’t have the time to create a test repo.

[cmawhorter]

one final post to hopefully save someone else some time.

if you’re hitting this issue, you’ve found a very old npm bug that went unfixed until npm 7.

there is no workaround and the recommendation is to upgrade to npm >= 7. but… npm >= 7 has a years old issue with private registries and you might not be able to use it if you’re installing private packages e.g. github private registry

my fix in my previous comment wasn’t portable, but this should be:

• open package-lock.json
• search for all “schema-utils”: entries that reference ^4.0.0
• look for the ones that are in the dependencies entry of another package: "${dependency_name}": { "dependencies": { "schema-utils": ...this... }, and replace that entry with this below:

    "schema-utils": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
      "dev": true,
      "requires": {
        "@types/json-schema": "^7.0.8",
        "ajv": "^6.12.5",
        "ajv-keywords": "^3.5.2"
      }
    }

i then removed node_modules and did a clean install and webpack would now build. i also kept npm i schema-utils@3.1.1 -D from my previous post, but i’m pretty sure it doesn’t matter.