TypeError: Ajv is not a constructor when I run npm run build

Question

I'm stumbling on an error every time I run npm run build

error:

/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:66
const ajv = new Ajv({
            ^

TypeError: Ajv is not a constructor
    at Object.<anonymous> (/home/ts34mpr/website/client/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:66:13)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/ts34mpr/website/client/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/index.js:6:5)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

please does anyone knows the solution or can help please! Thank you

Pannier

I just came across the same problem. Did you find a solution? – Teratogenic

nope... in fact I re-initiated the project and copied all components then it worked, but this solution is just for building the project locally not on the server – Pannier

I also have the same problem after updating version of Node.js+npm (before I was updating CRA and weback to version 5) but it was broken by the Node.js version update. – Leptospirosis

We decided to move from npm to yarn due to many issues recently with npm - also since this error was unfixable in 1MD and we needed to release new production asap. How to move from npm to yarn I described here: https://mcmap.net/q/435084/-how-do-i-switch-from-npm-to-yarn-in-my-project – Leptospirosis

Solution was to migrate from npm to yarn as following: https://mcmap.net/q/435084/-how-do-i-switch-from-npm-to-yarn-in-my-project – Pannier

Answer 1

Solution was to migrate from npm to yarn as following: https://mcmap.net/q/435084/-how-do-i-switch-from-npm-to-yarn-in-my-project

Pannier

Answer 2

I have a more permanent answer than my previous one. Downgrade mini-css-extract-plugin to 2.4.7. For example:

"mini-css-extract-plugin": "2.4.7",

I tested each version from 2.5.3 down and this is most recent version where this error does not occur.

It would be nice to know why this works, but it does.

Decorate

Does not work for me, usually is peer dep but even fixing it by resolutions doesn't seems to work. – Leptospirosis

Answer 3

Same problem for me. I find if I delete node_modules and package-lock.json and then run npm install and npm run build, that solves it. Not a great answer. I'd like to know the real solution.

Decorate

Had the same issue and as the answer states, it worked for me. IIRC this occurred after a nodejs upgrade. – Upstage

deleting package-lock.json can break things don't do that on any occasions (maybe unless you are the only one working on the project and it's not production app, but still its not recommended solution) – Leptospirosis

Answer 4

add resolutions to the package.json.

"resolutions":{
   "mini-css-extract-plugin":"2.4.5"
}

then run npx npm-force-resolutions in your terminal.

I was able to solve the issue with this.

Chare

Answer 5

I know this is old thread. But i recently faced the same issue.

Recently we updated node (20+) and npm (10+) and some days later, all of a sudden i started getting the issue like below. The issue was occurring only sometimes when we build the project (which was strange!)

[INFO] Running 'npm run build:prod' in /Users/***
[INFO]
[INFO] > NODE_ENV=production webpack --config=./webpack.config.js
[INFO]
[INFO] [webpack-cli] Failed to load '/Users/***/webpack.config.js' config
[INFO] [webpack-cli] TypeError: ajvKeywords is not a function
[INFO]     at /Users/**/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:37:3
[INFO]     at /Users/**/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/util/memorize.js:20:44
[INFO]     at validateObject (/Users/**/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:169:26)
[INFO]     at validate (/Users/**/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:155:14)
[INFO]     at new MiniCssExtractPlugin (/Users/**/node_modules/mini-css-extract-plugin/dist/index.js:497:5)
[INFO]     at getPlugins (/Users/**/webpack.config.js:46:7)
[INFO]     at Object.<anonymous> (/Users/**/webpack.config.js:215:39)
[INFO]     at Module._compile (node:internal/modules/cjs/loader:1241:14)
[INFO]     at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
[INFO]     at Module.load (node:internal/modules/cjs/loader:1091:32) 

I tried several steps like upgrading some packages but nothing worked. What worked for me is to remove the resolutions from package.json and preinstall script. Also i had to add "ajv-keywords": "~5.1.0" in the dev dependancies.

Hope this helps!

Caesarism