webpack 5 angular polyfill for node.js crypto-js

Question

I have basic question about webpack 5 configuration since I have zero experience with it. I would like to create most simple Angular application that uses node.js module crypto-js and SHA256.

Before webpack 5 it was quite simple. You didn't have to worry about webpack, it was somewhere in behind.

In command prompt I did : ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> write simple test code with imported SHA256 -> build it and -> it worked!

Now I get 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.

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 have to install this module and include this polyfill inside config file. The question is howto write most simple webpack.config.js, where to put it and what to include in it besides these lines?

BR

score 37 · Answer 1 · answered Jun 19 '21 at 08:56

37

I had the same issue, this is the working solution i found on git hub. https://github.com/ChainSafe/web3.js/issues/4070

run in your project directory:

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

tsconfig.json Add this in:"compilerOptions": { [...] }

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

answered Jun 19 '21 at 08:56

Nicolas

471
3
6

3

After 2 days of hunting, this solved my issue of no crypto using Angular 12, trying to validate AWS Cognito JWT without running a separate node server. Thank you so so much – Sierra4x4 Oct 11 '21 at 17:53
This worked for me too with everything but crypto. My package `@toruslabs/eccrypto` depends on it and I guess doesn't see the override. Any ideas? – Calrocks Dec 17 '21 at 23:04
I had the same problem with bcryptjs package and Angular 13. This solved the warning. I also had to add `"allowedCommonJsDependencies": ["crypto"]` to angular.json like it's explained in Wahib Kerkeni reply – Dario Vogogna Dec 23 '21 at 15:56

score 34 · Answer 2 · edited Sep 23 '22 at 11:02

34

I ran into this problem after upgrading to Angular 12, so after searching I ended up doing the following:

In tsconfig.json I added:

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

And in angular.json I added:

     {
    "architect": {
            "build": {
              "options": {
                "allowedCommonJsDependencies": ["crypto"], // note that this is the key of --> "crypto":["node_modules/crypto-js"]"
              }
            }
        }
    }

And the warnings are gone. I hope this will help you out.

edited Sep 23 '22 at 11:02

Shashank Vivek

16,888
8
62
104

answered Jun 02 '21 at 15:38

Wahib Kerkeni

566
7
10

1

You are a Crack! Thanks a lot. – 1antares1 Jun 13 '21 at 00:39
2

Thanks. In the `allowedCommonJsDependencies` I had to call it `crypto-js` because that is the node module I load in. – Mattijs Jun 14 '21 at 15:13
4

I had to use **"stream": [ "../node_modules/stream-browserify" ]**, Notice the two dots.. because I use "src" as baseUrl – Chen Peleg Nov 22 '21 at 14:09
I've had a similar problem with "stream". First I tried the above solution with `"stream":["node_modules/readable-stream"]`, which didn't work out. I even though about trying the custom webpack for Angular, but then I tried `"stream":["node_modules/stream-browserify"]` and it did work. Thanks! – ole Oct 21 '22 at 09:38

sjsam · Answer 3 · 2021-09-16T17:30:13.597

The below steps will help resolve this problem

Install the browserify ports for crypto and stream

npm install crypto-browserify stream-browserify

In tsconfig.json under compiler options, add the below lines. Since webpack is not auto-exporting the polyfills, these specify a set of entries that re-map imports to additional lookup locations.
```
"paths":{
"crypto":["node_modules/crypto-browserify"],
"stream":["node_modules/stream-browserify"]
}
```
In angular.json under architect->build->options add the below line which says the CommonJS packages crypto should be used without a build time warning.
```
"allowedCommonJsDependencies": ["crypto"]
```

^{Note : Read what browserify does.}

score 6 · Answer 4 · answered Nov 22 '21 at 14:28

6

In addition to @Nicolas 's answer, I also had a problem the 'Global is undefined'.

To solve that I had to add those lines to 'polyfills.ts' :

(window as any).global = window; 
(window as any).process = {
   env: {DEBUG: undefined},
};

answered Nov 22 '21 at 14:28

Chen Peleg

953
10
16

score 4 · Answer 5 · edited Jun 01 '21 at 13:28

Sadly, the webpack configuration is hidden by Angular that only give you access to some options exposed by the AngularCli.

However you can use the package @angular-builders/custom-webpack that works very well. It's easy to use and you can substitute some webpack options without breaking all the configuration provided by Angular.

So, in your case, you could add a crypto-browserify as fallback for "crypto". In that case your webpack extra config file would look like :

{ resolve: { fallback: { crypto: "./node_modules/crypto-browserify" } } }

Robel · Answer 6 · 2022-10-15T22:28:01.327

-1

If you are in vue and your error starts like this 'Module not found: Error: Can't resolve 'http' ...' installing url-loader will do the trick. Just install it using npm. npm install --save-dev url-loader

edited Oct 15 '22 at 22:28

answered Oct 15 '22 at 22:27

Robel

9
2

webpack 5 angular polyfill for node.js crypto-js

6 Answers6

Linked