Quick Guide: Resolving "Cannot find module 'ajv/dist/compile/codegen'" in React

When working on React applications, encountering module resolution errors can be frustrating. One common error is:

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

This error typically occurs due to missing or mismatched packages in your node_modules directory. Here’s a step-by-step guide to troubleshoot and resolve this issue effectively.

1. Delete node_modules and package-lock.json:

Sometimes, deleting these folders/files and reinstalling dependencies can resolve issues.

rm -rf node_modules
rm package-lock.json

2. Clear npm Cache:

Clear the npm cache to ensure no corrupted files are being used during installation.

npm cache clean --force

3. Reinstall Dependencies:

Reinstall your project's dependencies.

npm install

4. Ensure Compatibility:
Ensure that your ajv and ajv-keywords versions are compatible. You can manually check this in your package.json or install compatible versions.

For example, if your ajv version is 7.x, ensure ajv-keywords version is also compatible with it:

npm install ajv@latest ajv-keywords@latest

Run the Application
After reinstalling the dependencies, try running your application again.

npm start

If the above steps do not resolve the issue, try updating your react-scripts to the latest version, as it might have fixes for such dependency issues.

npm install react-scripts@latest

Once done, run the application again:

npm start

Conclusion

Feel free to refer to the code snippets provided in each step to assist you through the process. If you encounter any further issues, don’t hesitate to seek help from the developer community or consult the documentation of the involved packages.