Warning: ./node_modules/amazon-cognito-identity-js/es/utils/cryptoSecureRandomInt.js Module not found: Error: Can't resolve 'crypto' in

[jerowe]

Describe the bug

Warning: ./node_modules/amazon-cognito-identity-js/es/utils/cryptoSecureRandomInt.js
Module not found: Error: Can't resolve 'crypto' in 

To Reproduce
Steps to reproduce the behavior:

npm start

Here's my package.json

{
  "name": "app",
  "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/animations": "~11.0.6",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "~11.0.6",
    "@angular/compiler": "~11.0.6",
    "@angular/core": "~11.0.6",
    "@angular/forms": "~11.0.6",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "~11.0.6",
    "@angular/platform-browser-dynamic": "~11.0.6",
    "@angular/router": "~11.0.6",
    "@aws-amplify/ui-angular": "^0.4.17",
    "amazon-cognito-identity-js": "^4.5.7",
    "aws-amplify": "^3.3.14",
    "aws-sdk": "^2.824.0",
    "crypto-js": "^3.1.9-1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.6",
    "@angular/cli": "~11.0.6",
    "@angular/compiler-cli": "~11.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Expected behavior
Not to get this error. ;-)

Code Snippet

src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

angular.json /projects/app/architect/build/options/allowedCommonJsDependencies

            "allowedCommonJsDependencies": [
              "lodash",
              "uuid",
              "crypto-js",
              "@aws-sdk/eventstream-marshaller",
              "buffer",
              "js-cookie",
              "@aws-crypto",
              "zen-observable",
              "@aws-sdk/util-utf8-node",
              "@aws-crypto/sha256-js",
              "@aws-sdk/util-buffer-from",
              "@aws-sdk/smithy-client",
              "@aws-sdk/middleware-serde",
              "@aws-sdk/middleware-user-agent",
              "@aws-sdk/middleware-retry",
              "@aws-sdk/middleware-signing",
              "@aws-sdk/middleware-content-length",
              "@aws-sdk/middleware-host-header",
              "@aws-sdk/config-resolver",
              "@aws-sdk/s3-request-presigner",
              "@aws-sdk/util-format-url",
              "@aws-sdk/util-create-request",
              "@aws-sdk/property-provider",
              "axios",
              "@aws-sdk/fetch-http-handler",
              "@aws-sdk/protocol-http",
              "@aws-sdk/querystring-builder",
              "@aws-sdk/util-utf8-browser",
              "@aws-sdk/url-parser-browser",
              "@aws-crypto/sha256-browser",
              "@aws-sdk/url-parser-node",
              "@aws-sdk/util-uri-escape",
              "@aws-sdk/middleware-sdk-s3",
              "@aws-sdk/middleware-bucket-endpoint",
              "@aws-sdk/querystring-parser",
              "@aws-sdk/middleware-apply-body-checksum",
              "@aws-sdk/middleware-ssec",
              "@aws-sdk/middleware-expect-continue",
              "fast-xml-parser",
              "@aws-sdk/xml-builder",
              "@aws-sdk/md5-js",
              "@aws-sdk/hash-blob-browser",
              "@aws-sdk/eventstream-serde-browser",
              "@aws-sdk/middleware-location-constraint",
              "uuid",
              "@aws-sdk/credential-provider-cognito-identity",
              "@aws-sdk/eventstream-serde-config-resolver",
              "ulid",
              "zen-push",
              "lodash",
              "@aws-amplify/core",
              "url",
              "@aws-crypto/crc32",
              "isomorphic-unfetch",
              "crypto-js/lib-typedarrays",
              "crypto-js/hmac-sha256",
              "crypto"
            ]
          },

Screenshots
If applicable, add screenshots to help explain your problem.

What is Configured?

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.11 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.5.0 - /usr/local/bin/node
    npm: 7.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 82.0.3
    Safari: 14.0
  npmPackages:
    @angular-devkit/build-angular: ~0.1100.6 => 0.1100.6 
    @angular/animations: ~11.0.6 => 11.0.7 
    @angular/cdk: ^11.0.3 => 11.0.3 
    @angular/cli: ~11.0.6 => 11.0.6 
    @angular/common: ~11.0.6 => 11.0.7 
    @angular/compiler: ~11.0.6 => 11.0.7 
    @angular/compiler-cli: ~11.0.6 => 11.0.7 
    @angular/core: ~11.0.6 => 11.0.7 
    @angular/forms: ~11.0.6 => 11.0.7 
    @angular/material: ^11.0.3 => 11.0.3 
    @angular/platform-browser: ~11.0.6 => 11.0.7 
    @angular/platform-browser-dynamic: ~11.0.6 => 11.0.7 
    @angular/router: ~11.0.6 => 11.0.7 
    @aws-amplify/ui-angular: ^0.4.17 => 0.4.17 
    @types/jasmine: ~3.6.0 => 3.6.2 
    @types/node: ^12.11.1 => 12.19.12 
    amazon-cognito-identity-js: ^4.5.7 => 4.5.7 
    aws-amplify: ^3.3.14 => 3.3.14 
    aws-sdk: ^2.824.0 => 2.824.0 
    codelyzer: ^6.0.0 => 6.0.1 
    crypto-js: ^3.1.9-1 => 3.3.0 
    jasmine-core: ~3.6.0 => 3.6.0 
    jasmine-spec-reporter: ~5.0.0 => 5.0.2 
    karma: ~5.1.0 => 5.1.1 
    karma-chrome-launcher: ~3.1.0 => 3.1.0 
    karma-coverage: ~2.0.3 => 2.0.3 
    karma-jasmine: ~4.0.0 => 4.0.1 
    karma-jasmine-html-reporter: ^1.5.0 => 1.5.4 
    protractor: ~7.0.0 => 7.0.0 
    rxjs: ~6.6.0 => 6.6.3 
    ts-node: ~8.3.0 => 8.3.0 
    tslib: ^2.0.0 => 2.1.0 
    tslint: ~6.1.0 => 6.1.3 
    typescript: ~4.0.2 => 4.0.5 
    zone.js: ~0.10.2 => 0.10.3 
  npmGlobalPackages:
    @angular/cli: 11.0.6
    @aws-amplify/cli: 4.41.1
    @compodoc/compodoc: 1.1.11
    npm: 7.3.0

I've also tried using angular 10, same error.

I really don't care if I'm on the newest version of anything. Are there some pinned versions I can just use to get started? Or a docker container with pinned versions that works?

Additional context
Add any other context about the problem here.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[amhinson]

This appears to be a duplicate of #7454 & #7098. There is some more context in those issues as to why the warning exists as well as a workaround. Regardless, auth functionality shouldn't be impacted by the console warning.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.