Cannot create build: TypeError: Ajv is not a constructor

[vishnusajev]

Steps To Reproduce

1. Update to latest react-scripts (5.0.0)
2. Do npm run build.

The current behavior

home/node/frontend/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/node/frontend/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:66:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:11[55](https://firelight.smokescreen.io/v4/frontend/-/jobs/95213#L55):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/node/frontend/node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/index.js:6:5)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)

[FredChauviere]

Same here...

[pedrorogger]

Same problem.

[pgrones]

Same issue here. Sometimes it works and sometimes it doesn't.

Also happens on npm run start for me

[sergei-filitov]

Same

Resolved by deleting the node_modules folder, npm install and restarting VS Code

[kee0624]

Same here, any update for this issue?

[vishnusajev]

I got this fixed after uninstalling npm-force-resolutions and removing all preinstall related to that. And then

• rm -rf node_modules
• rm package-lock.json
• npm install

[vezwork]

I am having a similar problem. I believe that this error occurs when particular libraries are imported in a create-react-app project.

I did some debugging and found that in some cases, if the library's code (in node_modules) contains require(<<SOME MODULE NAME>>), this require call incorrectly(?) returns a string. In my case, my library code contains require("three") which strangely returns the string "/static/media/three.033a3ceb8fc583972a98.cjs", when it should return a module object with the functions and values inside the three library.

It seems that create-react-app 5's webpack configuration is not correctly set up to handle node_module code that contains require(<<SOME MODULE NAME>>) for some modules. I am not yet sure why. I would like to find a workaround or fix.

---

I found a very hacky workaround: replace instances of require(<<SOME MODULE NAME>>) that cause issues in library code with relative requires, i.e. require(../../../three).

This is a pretty bad solution because it involves manually changing code in node_modules.

I tried this workaround because I found that the only place that require is used in the node_modules in a fresh CRA project is in react/index.js and is a relative require.

---

By ejecting and writing a custom webpack loader I determined that this is occurring because the libraries being loaded ("three" in my case) provides a .cjs file which falls into the type: "asset/resource" loader at the bottom of the webpack config loader. I verified that this fix works for me https://github.com/vezwork/create-react-app/compare/main...vezwork:create-react-app:fix-cjs-loading

[sucy6330133]

I have tried the fix https://github.com/vezwork/create-react-app/compare/main...vezwork:create-react-app:fix-cjs-loading for my similar issue as well. Will this fix be merged soon. Thanks.

[Abel3047]

I got this fixed after uninstalling npm-force-resolutions and removing all preinstall related to that. And then

• rm -rf node_modules
• rm package-lock.json
• npm install

I followed through with the earlier comment and the npm install worked fine as well. Still don't know what I was doing. But its cause I was moving folders around and really I was down the wrong rabbit hole. Turns out I just needed to install a few packages my team member did

[kirandash]

I got this fixed after uninstalling npm-force-resolutions and removing all preinstall related to that. And then

• rm -rf node_modules
• rm package-lock.json
• npm install

This is the only solution that's working for me now. It would be better if someone can point to a nicer solution. As currently whenever I add a new package, I have to repeat the above steps.

[clovus]

Same issue.

[ManhNV103]

+1 same issue

[ferdelamad]

This is very painful, every time you add a new dependency you have to rm -rf node_modules and install it again.

Any updates on this are very much appreciated 🙏

[Gerst20051]

Until this gets fixed we can use a shell alias:

alias fix.ajv='rm -rf node_modules && rm package-lock.json && npm i && git restore package-lock.json'

[$]> fix.ajv && npm start

[nga-27]

Not entirely sure if this helps, because I don't have preinstall hooks from npm-force-resolutions, but I seemed to solve the issue by adding "mini-css-extract-plugin": "^2.7.5" to the build. A previous SO post suggested that this worked, but I sense it didn't for react-scripts 5.0.1.

Also, despite not having the preinstall hooks, I did still get this error until I upgraded the module. You might also have to remove package-lock.json and start fresh (as well as removing node_modules). I ran npm install followed by npm start several times to ensure that the app ran appropriately.