Module not found: Error: Can't resolve 'crypto' in '/opt/lampp/htdocs/angular-testing-app/node_modules/jwa'

Question

I will install jsonwebtoken module in my angular6 project npm i jsonwebtoken. The jsonwebtoken module Dependencies jwa installed, But that index.js file crypto require error Can't resolve 'crypto', But i already install crypto module.

Please help and clear the issue.

My error:

ERROR in ./node_modules/jwa/index.js
Module not found: Error: Can't resolve 'crypto' in '/opt/lampp/htdocs/angular-testing-app/node_modules/jwa'
ERROR in ./node_modules/jws/lib/sign-stream.js
Module not found: Error: Can't resolve 'stream' in '/opt/lampp/htdocs/angular-testing-app/node_modules/jws/lib'
ERROR in ./node_modules/jws/lib/verify-stream.js
Module not found: Error: Can't resolve 'stream' in '/opt/lampp/htdocs/angular-testing-app/node_modules/jws/lib'
ERROR in ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in '/opt/lampp/htdocs/angular-testing-app/node_modules/jws/lib'

Answer 1

I faced the issue same as you and I resolved. You can follow these steps:

1. Add this file to root directory

patch.js

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

2. Add this command to package.json file

package.json

{...
  "scripts": {
    "postinstall": "node patch.js",
    ...
  }
}

Reference: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

Answer 2

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:

// old:
node: false,
// new:
node: { crypto: true, stream: true },

Answer 3

you can modify browser.js with this script, should fix it.....

 const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }

  //necesario para que jsforce y algunas bibliotecas que aun usan el global de nodejs
  let result = data.replace(/node: false/g,
    `node:
    {
     crypto: true,
     stream: true,
     fs: 'empty',
     global: true,
     tls: 'empty',
     net: 'empty',
     process: true,
     module: false,
     clearImmediate: false,
     setImmediate: false

     }`);


  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.error(err);
  });

});