Remove CommonJS or AMD dependencies optimization bailouts warnings for AWS Amplify using Angular v10

angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  ...
  "options": {
    "allowedCommonJsDependencies": ["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",
      "events", "xstate/lib/waitFor.js", "style-dictionary/lib/utils/deepExtend.js", 
      "style-dictionary/lib/utils/flattenProperties.js", "style-dictionary/lib/utils/references/usesReference.js", "cookie"
      "@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", "camelcase-keys",
      "xstate/lib/actions", "style-dictionary/lib/utils/deepExtend", "style-dictionary/lib/utils/flattenProperties",
      "style-dictionary/lib/utils/references/usesReference",
    ]
  }
}

Thanks @gsans, looks like we may also need to include @aws-amplify/core now

Got it. Thanks

I like it but I needed to add url.

gives me this error: Property allowedCommonJsDependencies is not allowed.:(

@gsans I also needed to include @aws-crypto/crc32 and isomorphic-unfetch.

Got it. Thanks!

I am still getting this error - any suggestions?

contact-form.component.ts depends on '@sendgrid/mail'. CommonJS or AMD dependencies can cause optimization bailouts.
even with the change to my angular.json

This seems unrelated to Amplify but can be fixed in the same way by adding '@sendgrid/mail' to the list.

And here I thought I was going to have to type all those CommonJS module names out.... thanks boss!

Edit: Had to add the following if you want to update

          "@aws-amplify/auth",
          "@aws-amplify/ui-components",

Thanks. Updated with latest.

this is ridiculous, aws-amplify is a mess, they got breaking changes ad nauseum

Thanks @gsans, I solved this problem to putting the name of each dependency showed in warning en la option "allowedCommonJsDependencies": ["buffer", "uuid", "@aws-crypto/sha256-browser",
"@aws-amplify/core", "ulid", "@aws-crypto/sha256-js", "lodash/isEqual", "lodash/isEmpty",
"lodash/get", "crypto-js/hmac-sha256", "crypto-js/lib-typedarrays", "zen-observable",
"axios", "js-cookie", "isomorphic-unfetch", "@aws-crypto/crc32", "fast-xml-parser"]

Thanks @gsans its really very helpful form.

Thanks Everyone!!

Isn't this just sweeping the problem under the carpet? Serious question, I don't know.

It seems to me that ignoring warnings isn't a good plan in the long run.

You are completely right but if you want to just be able to debug and not receive a ton of warnings in the console this is a way to get the best of a bad situation

You are completely right but if you want to just be able to debug and not receive a ton of warnings in the console this is a way to get the best of a bad situation

Good to know, thank you.

Thanks @gsans , looks like we may also need to include 'camelcase-keys' now to remove warning from @aws-amplify\geo

Got it. Thanks!

thanks @gsans ! Also had to add the following (on amplify version 11.0.2)

         "xstate/lib/actions",
          "style-dictionary/lib/utils/deepExtend",
          "style-dictionary/lib/utils/flattenProperties",
          "style-dictionary/lib/utils/references/usesReference"

Got it. Thanks!

A few more..

"events",
"xstate/lib/waitFor.js",
"style-dictionary/lib/utils/deepExtend.js",
"style-dictionary/lib/utils/flattenProperties.js",
"style-dictionary/lib/utils/references/usesReference.js",
"cookie"

Thanks! Updated