Can't resolve 'crypto' after update to Angular 12

[cytrix86]

Hello,

I am having trouble solving the following build error after updating to Angular 12:

./node_modules/crypto-js/core.js:43:22-39 - Warning: Module not found: Error: Can't resolve 'crypto' in '/XXXX/node_modules/crypto-js'

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 }

My Angular Versions:

Angular CLI: 12.0.1
Node: 14.17.0
Package Manager: npm 7.14.0
OS: darwin x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@angular/google-maps            11.2.13
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4 

My dependencies:

  "dependencies": {
    "@angular/animations": "^12.0.1",
    "@angular/common": "^12.0.1",
    "@angular/compiler": "^12.0.1",
    "@angular/core": "^12.0.1",
    "@angular/forms": "^12.0.1",
    "@angular/google-maps": "^11.2.13",
    "@angular/platform-browser": "^12.0.1",
    "@angular/platform-browser-dynamic": "^12.0.1",
    "@angular/router": "^12.0.1",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "aws-amplify": "^4.0.2",
    "aws-sdk": "^2.911.0",
    "bootstrap": "^5.0.1",
    "crypto-js": "^4.0.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.1",
    "@angular/cli": "^12.0.1",
    "@angular/compiler-cli": "^12.0.1",
    "@angular/localize": "^12.0.1",
    "@types/jasmine": "^3.6.11",
    "@types/node": "^12.20.13",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  },

Any advice?

Thank you very much in advance.

[alan-agius4]

Duplicate of #20821

These Node.js shims can be provided via TypeScript path mappings if needed in a project.
Please note, however, that libraries should ideally be providing web compatible variants of their libraries that use native browser APIs where possible.

Example path mapping configuration within the application's TypeScript configuration file:

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

The crypto-browserify and stream-browserify packages will need to be installed within the project.

This issue is also asking for the output of the Webpack configuration generation to be provided so that it can be used independently. Not to be able to modify the existing configuration in-place which is what would be needed based on the Webpack error shown above for the Node.js shim.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}