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

Question

I am getting the following list of errors when I run ng serve.

My package JSON is as follows:

{   "name": "ProName",   "version": "0.0.0",   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"   },   "private": true,   "dependencies": {
    "@angular-devkit/build-angular": "~0.12.0",
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@types/dotenv": "^4.0.3",
    "@types/errorhandler": "0.0.32",
    "@types/express": "^4.16.0",
    "@types/node": "^10.5.1",
    "apostille-library": "^7.1.0",
    "core-js": "^2.5.4",
    "dotenv": "^6.0.0",
    "errorhandler": "^1.5.0",
    "express": "^4.16.0",
    "nem2-sdk": "^0.9.7",
    "rxjs": "~6.3.3",
    "stream": "0.0.2",
    "tslib": "^1.9.0",
    "typescript": "^2.9.2",
    "zone.js": "~0.8.26"   } }

The error I get :

ERROR in ./node_modules/aws-sign2/index.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/aws-sign2' ERROR in ./node_modules/aws4/aws4.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/aws4' ERROR in ./node_modules/ecc-jsbn/index.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/ecc-jsbn' ERROR in ./node_modules/http-signature/lib/verify.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ERROR in ./node_modules/http-signature/lib/signer.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ERROR in ./node_modules/nem-sdk/build/external/nacl-fast.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/nem-sdk/build/external' ERROR in ./node_modules/nem-sdk/node_modules/aws-sign2/index.js

Answer 1

I ran into a similar issue lately while trying to use another library (tiff.js) in a small project I was experimenting with.

The way I got around this was to add the following to my package.json file, right after the devDependencies section.

"devDependencies": {
    ...
},
"browser": {
    "crypto": false
}

This didn't seem to have any adverse effect when trying to use the library in the application.

Answer 2

Adding this setting in tsconfig.ts file under that project resolve this warning

"compilerOptions": {
"baseUrl": "./",
"paths": {
  "crypto": [
    "../../node_modules/crypto-js"
  ]
}

Answer 3

I like R. Richards's answer, but I thought it would be useful to provide some more information.

This is a known issue with Angular, and the Angular CLI dev team seems to think it's a feature rather than a bug. I, as well as other developers in this issue thread, disagree. Contributors to that thread provided several workaround fixes, but my project didn't compile successfully until I implemented R. Richards' solution. I didn't revert the previous changes, though, so tacnoman's and GrandSchtroumpf's fixes may be of use to others.

Some, like clovis1122 here and others in that issue thread, have questioned why a web app would need access to these libraries and why the necessary tasks can't be completed on the server side instead. I can't speak for everyone, but my use case is that, when authenticating a user account, Strapi responds with a JSON Web Token string that must be decoded by the client. Since the necessary library depends on crypto and stream, you won't be able to extract the JWT expiration time unless those dependencies are available.

In case anyone has trouble extrapolating from R. Richards' answer, you'll have to set to false any dependencies that are showing up in "can't resolve x" errors. For example, the critical part of my package.json is:

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

Answer 4

I thought I would expand on what Tarique Ahmed wrote in his answer.

I was using an npm module that had the following line in the code:

const crypto = require('crypto');

I couldn't add:

"browser": {
  "crypto": false
}

to the package.json because the crypto package had to be part of the build.

It turns out that during the compilation process Angular seems to have decided to install the crypto-browserify package instead of crypto.

Adding the following to the tsconfig.json file instructs the build to use the crypto-browserify library every time that crypto is required. As you can see, I had the same issue for the stream package.

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

Answer 5

After having the same issue with Angular 11 and crypto-js 4 (and manually setting the path in tsconfig.json), I found rolling back crypto-js to version 3.1.9-1 fixed the issue. It seems a change made in version 4 caused the issue.

npm install [email protected]

Explained here in repo issues:

GitHub issue

Answer 6

If you upgraded to Webpack 5, you need to add this to your webpack config file:

resolve: {
    fallback: { crypto: false },
},

Answer 7

aws-sign2 is a NodeJS package (and crypto is a NodeJS module), but it looks like you're dealing with a web application. It makes sense that the crypto module is not available in that environment.

Would it be possible to complete what you need to do server-side? Otherwise, you may need to look for another package.

Answer 8

After a deep a research i found that the solution is very simple: replace import * as CryptoJS from 'crypto-js'; with declare var CryptoJS;

Answer 9

Using direct import may not work with ES6 Enviornment..

This may help you.

$ npm i crypto-js@latest // For using latest version 4

import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
import { secretKey } from './environments/environment';

/** Encryption */
const data = {key: 'Test Value'};
const ciphertext = AES.encrypt(JSON.stringify(data), secretKey).toString();
console.log('Encrypted Data', ciphertext);

/** Decryption */
const bytes = AES.decrypt(ciphertext, secretKey);
const decryptedData = JSON.parse(bytes.toString(Utf8));
console.log('Decrypted Data', decryptedData);

https://github.com/brix/crypto-js/issues/168#issuecomment-785617218

Answer 10

Add the option allowedCommonJsDependencies with literal "crypto-js" in a array, this in file angular.json:

"architect": 
        "build": {              
          "options": {               
            "allowedCommonJsDependencies": [
              "crypto-js"
            ]
          },
         }
 }

This will disable all warnings, tested in Angular 11.

Answer 11

For Laravel Inertia JS project, my solution was:

1- Add dependencies to package.json

   "dependencies": {
        "crypto-browserify": "3.12.0",
        "crypto-random-string": "^3.3.0",
        "stream": "^0.0.2"
    }

2-In webpack.config.js:

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream'),
        },
    },
};

3-Install, build and run:

npm install && npm run watch