Module not found: Error: Can't resolve 'crypto' in

Question

Error Message:

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.

So I was googling this issue and had a LOT of problems finding a solution. So i would like to share it with you:

First of all this can happen not only with crypto but other stuff like http, https, os and so on.
Check if the packet (this case crypto-browserify is installed) There should be a folder node_modules\crypto-browserify

If it doesnt exist: npm install crypto browsrify, then yarn add @types/node@15.12.5 -D (for this node version)

In node_modules\crypto-browserify edit package.json and add

 , 
 "optionalDependencies": {},
 "browser": {
   "crypto": false
 },

(after devDependencies)

under tsconfig.json add

"compilerOptions": {
"paths":{
   "crypto":["node_modules/crypto-browserify"],
   "http":["node_modules/stream-http"],
   "https":["node_modules/https-browserify"]
   },

under angluar.json add

"architect": {
   "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
      "allowedCommonJsDependencies": ["crypto"],
      "allowedCommonJsDependencies": ["http"],
      "allowedCommonJsDependencies": ["https"],

BTW can somebody please tell me how to share a full block of code. stackoverflow told me to use "`" every line.. — Alexander Wolters, Jul 06 '21 at 13:40
Uses triple backticks to start a code block, and then again to close it. I also put `json` after the opening three backticks to get the correct syntax highlighting. — Darren Cook, Oct 11 '21 at 08:48
This would be better rearranged as a self-answer: give just the error message in the question, and then all the config changes as an answer. — Darren Cook, Oct 11 '21 at 08:49
Is https://stackoverflow.com/a/67076572/841830 a simpler solution? Or solving a different problem? — Darren Cook, Oct 11 '21 at 08:53

score 1 · Answer 1 · answered Dec 19 '21 at 17:08

I had this problem in ReactJS with create-react-app(facebook)

Solution:

First install the necessary packages "crypto-browserify"
Modify webpack.config.js in reactjs with create-react-app this file is inside:

node_modules/react-scripts/config/webpack.config.js

Search module.exports and inside this function there is a return:

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: {
        // Here paste
        crypto: require.resolve("crypto-browserify"),

      }
    }
  }
}

Note:Is possible that need more packages, for example "stream-browserify" the steps are same. This solution works, but when the webpack project starts it shows warnings

Pd: I am not native speaker English, but I hope understand me.

Module not found: Error: Can't resolve 'crypto' in

1 Answers1