I was doing a project in ReactJS and needed to install jsonwebtoken module for the authentication part. After installing jsonwebtoken I faced some issues regarding crypto and other library modules.

The error was like this:-

Module not found: Error: Can’t resolve ‘crypto’ in ‘<your_project_path>/client/node_modules/jwa’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback ‘resolve.fallback: { “crypto”: require.resolve(“crypto-browserify”)}’

- install ‘crypto-browserify’

If you don’t want to include a polyfill, you can use an empty module like this: resolve.fallback: { “crypto”: false }

The error message is indicating that the “crypto” module is not found in the “<your_path>\client\node_modules\jwa” directory. The message also suggests that this issue may be related to changes in webpack version 5, where polyfills for node.js core modules are no longer included by default.

In earlier versions of webpack, any core Node.js modules that were imported in the code would automatically be included in the bundle, even if the code was running in the browser. These included modules such as ‘crypto’, ‘fs’, and ‘path’.

But in webpack version 5, this behavior has changed, and core Node.js modules are no longer automatically included in the bundle by default. This means that if your code is importing a core Node.js module, it will not work in the browser unless you explicitly include a polyfill for that module.

A polyfill is a piece of code that provides the functionality of a certain feature on environments that do not natively support it. In this case, since crypto module is not supported in the browser, the crypto-browserify is used as a polyfill to provide the same functionality in the browser.

So, this change in webpack means that developers need to be more aware of which modules they are importing in their code and ensure that those modules are available in the browser, either by providing a polyfill or by avoiding the use of that module altogether.

Solution

As we said the crypto-browserify is used as a polyfill to provide the same functionality in the browser, we can solve the issue by installing the crypto-browserify. To do that:-

First install crypto-browserify

npm install crypto-browserify

Then go to webpack.config.js file located in node_modules/react-scripts/config/webpack.config.js

On line 305:-

resolve: { fallback: { “crypto”: require.resolve(“crypto-browserify”) } ,

The “require.resolve” method is used to find the full file path of the specified module, so in this case it is loading the “crypto-browserify” module and finding its file path to use as polyfill.

You can also use an empty module,

resolve.fallback: { “crypto”: false }

means that the “crypto” module will not be resolved by the webpack’s resolver. This is useful if you want to prevent the crypto module from being included in your bundle and thus reducing the size of your bundle.