Error: Cannot find module 'ajv/dist/compile/codegen'

[stevesum]

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

[alexander-akait]

Sorry, can't be fixed on our side, please reinstall dependencies, something wrong on npm side

[nooxx]

@stevesum Hey, I'm encountering the same error. No luck reinstalling dependencies. Have you figured a workaround?

[alexander-akait]

Please create reproducible test repo

[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.

[alexander-akait]

@nooxx Weird, we already have it https://github.com/webpack/schema-utils/blob/master/package.json#L49, maybe you can provide full stack of the error or more information?

[stevesum]

@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.

Thanks, @nooxx I will try it. I have no other workaround but simply downgrade the min-css-extract-plugin to 2.4.4 what works well. But have to care about not adding with "^2.4.4" but the fix version "2.4.4"

[alexander-akait]

@stevesum Maybe you can create reproducible test repo? Also please run npm ls ajv and npm ls schema-utils and npm ls ajv-keywords

[L-haiqin]

npm ls ajv显示ajv@4.11.8 invalid: "^8.8.2" from node_modules/ajv-keywords，之后执行npm i ajv解决。

[cmawhorter]

@alexander-akait my npm ls is complaining css-minimizer-webpack-plugin@3.4.1 has an unmet peer dependency ajv@8.10.0.

├─┬ css-minimizer-webpack-plugin@3.4.1
...snip...
│ ├─┬ schema-utils@4.0.0
│ │ ├── @types/json-schema@7.0.9 deduped
│ │ ├─┬ UNMET PEER DEPENDENCY ajv@8.10.0
│ │ │ ├── fast-deep-equal@3.1.3 deduped
│ │ │ ├── json-schema-traverse@1.0.0
│ │ │ ├── require-from-string@2.0.2
│ │ │ └── uri-js@4.4.1 deduped
│ │ ├─┬ ajv-formats@2.1.1
│ │ │ └─┬ ajv@8.10.0
│ │ │   ├── fast-deep-equal@3.1.3 deduped
│ │ │   ├── json-schema-traverse@1.0.0
│ │ │   ├── require-from-string@2.0.2 deduped
│ │ │   └── uri-js@4.4.1 deduped
│ │ └─┬ ajv-keywords@5.1.0
│ │   └── fast-deep-equal@3.1.3 deduped

ajv@8.10.0 is both there, and not ... ?

from digging a little more i found serverless/serverless#8727 (comment)

according to that, the fix is to upgrade to npm >= 7, but in the case of my project i haven't been able to get that to succeed without errors quite yet.

downgrading mini-css-extract-plugin to schema-utils@3.1.1 would likely fix the problem. i have other webpack stuffs using that without issue.

Edit: the only way i could get things building was to do the following:

1. edit css-minimizer-webpack-plugin/package.json and mini-css-extract-plugin/package.json and change the schema-utils entry to "schema-utils": "3.1.1"
2. run npm i schema-utils@3.1.1 -D
3. everything seems to work. i think?

[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.

[Eng-Fouad]

I added this dependency and it solved the issue:

"dependencies": {
    "ajv": "^8.11.0",