create-react-app
create-react-app copied to clipboard
facebook
Module not found: Error: Can't resolve 'crypto'
The module crypto (built in to Node) doesn't work, and the instructions are extremely vague and unclear as to how to resolve this
Module not found: Error: Can't resolve 'crypto' in '/home/jeremy/code/RichTextEditor/src/components'
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 }
I tried ejecting and adding that line to my webpack config, which only gave me another error.
Googling around, all the answers seem to suggest random hacks like installing some other random package named react-app-rewired, which definitely should not be necessary to use an npm module that is already built in to Node.js.
I'd like to know specifically how to fix this. Also the error message should be modified to make the solution clearer.
React runs in a web browser and not on node. Browsers would not be implementing node's own APIs such as crypto, instead browsers implement the Web Crypto API https://www.w3.org/TR/WebCryptoAPI/#crypto-interface. Note that node also has an implementation of the Web Crypto API https://nodejs.org/api/webcrypto.html.
Essentially what you should be doing is to use a package that was designed to be run on a browser instead of running on node.
The message tells you that if you still wish to do so, you would need a polyfill, and it lists crypto-browserify which essentially provides a node crypto implementation that can run in a browser. Since CRA doesn't allow you to modify the webpack configuration to include the polyfill, your options is to either eject or use something like craco or react-app-rewired that allows you to modify the webpack configuration without ejecting.
Any particular answer to resolve this issue? If anyone has any idea it will be a great help.
@tusharagrawal3011 I was unable to find a solution to this nor a suitable client-side library to do this. But I was able to find a github gist with a solution that works fine for my use-case https://gist.github.com/ifandelse/3031112
Not sure if this is the answer... but I used crypto-js:
npm i crypto-js
npm i --save-dev @types/crypto-js
..
import HmacSHA256 from 'crypto-js/hmac-sha256';
import Hex from 'crypto-js/enc-hex';
..
const hmac = HmacSHA256(input, secret);
hmac.toString(Hex);
My project already uses crypto-js and I was able to resolve this by adding the following to my webpack.config.js file:
config.resolve.alias['crypto'] = 'crypto-js';
