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",

[Naveen-Dude]

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

Tried reinstalling dependencies but not working.

[3MR1T00]

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

You should not have any issues regarding package prefixes if you use npm ci instead of npm i when generating modules, checks syncronization between package and package.lock, giving priority to lock

[aleen42]

I still reproduce the problem under npm@8.x

[cmonteiro128]

Having missing ajv errors coming from this package as well (with this package being a dependency of react-scripts). Npm 8

[SevenOutman]

npm dedupe --force fixed it for me.

Explain

My Condition

• Some package requires ajv@6, and webpack-dev-server requires ajv@8
• I'm using --legacy-peer-deps flag for some packages with conflicting peer deps (in my case it's react)

Leads to - webpack-dev-server will always get ajv@6

$ npm ls ajv
├─┬ @commitlint/cli@16.3.0
│ └─┬ @commitlint/load@16.3.0
│   └─┬ @commitlint/config-validator@16.2.1
│     └── ajv@6.12.6 deduped
├─┬ eslint@8.33.0
│ ├─┬ @eslint/eslintrc@1.4.1
│ │ └── ajv@6.12.6 deduped
│ └── ajv@6.12.6
├─┬ stylelint@14.16.1
│ └─┬ table@6.8.1
│   └── ajv@8.12.0
├─┬ webpack-dev-server@4.11.1
│ └─┬ schema-utils@4.0.0
│   ├─┬ ajv-formats@2.1.1
│   │ └── ajv@8.12.0
│   ├─┬ ajv-keywords@5.1.0
│   │ └── ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
│   └── ajv@8.12.0
└─┬ webpack@5.75.0
  ├─┬ schema-utils@3.1.1
  │ ├─┬ ajv-keywords@3.5.2
  │ │ └── ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
  │ └── ajv@6.12.6 deduped
  └─┬ terser-webpack-plugin@5.3.6
    └─┬ schema-utils@3.1.1
      ├─┬ ajv-keywords@3.5.2
      │ └── ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
      └── ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords

Failed Attempts

• Delete node_modules and do npm i again (with --legacy-peer-deps flag otherwise the install would fail)
• Run npm dedupe (with --legacy-peer-deps flag otherwise the install would fail)

Guessing reason - The --legacy-peer-deps prevents resolving of webpack-dev-server's peer dependency.

Successful Attempt

Run npm dedupe --force.

$ npm ls ajv
├─┬ @commitlint/cli@16.3.0
│ └─┬ @commitlint/load@16.3.0
│   └─┬ @commitlint/config-validator@16.2.1
│     └── ajv@6.12.6
├─┬ eslint@8.33.0
│ ├─┬ @eslint/eslintrc@1.4.1
│ │ └── ajv@6.12.6
│ └── ajv@6.12.6
├─┬ stylelint@14.16.1
│ └─┬ table@6.8.1
│   └── ajv@8.12.0
├─┬ webpack-dev-server@4.11.1
│ └─┬ schema-utils@4.0.0
│   ├─┬ ajv-formats@2.1.1
│   │ └── ajv@8.12.0 deduped
│   ├─┬ ajv-keywords@5.1.0
│   │ └── ajv@8.12.0 deduped  // Yay! 🎉
│   └── ajv@8.12.0 deduped
└─┬ webpack@5.75.0
  ├─┬ schema-utils@3.1.1
  │ ├─┬ ajv-keywords@3.5.2
  │ │ └── ajv@6.12.6 deduped
  │ └── ajv@6.12.6
  └─┬ terser-webpack-plugin@5.3.6
    └─┬ schema-utils@3.1.1
      ├─┬ ajv-keywords@3.5.2
      │ └── ajv@6.12.6 deduped
      └── ajv@6.12.6

[cmonteiro128]

@SevenOutman That worked thanks!

[gayashan4lk]

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

I had the same issue with "@nrwl/react": "15.8.5".
npm i ajv@latest worked for me.

[nikl1337]

IT COULD BE MUCH BETTER IF I HAD MONEY TO BUY TIME TRAVEL STUFF DEAR ORPRESSORS

[dwiyatci]

pnpm install --frozen-lockfile instead of pnpm install --no-optional made it work for me for CI.