Amplify-js: Lots of warnings in Angular 9 CommonJS or AMD dependencies can cause optimization bailouts.

[ErikHDev]

Describe the bug
Installing the latest version of @aws-amplify/ui-angular and aws-amplify causes many warnings in the console when adding authentication. Also unable to remove warnings using angular.json.

To Reproduce
Steps to reproduce the behavior:

1. Install latest version of Angular CLI. (Tried on Angular 9 and Angular 10)
2. Follow instructions from here https://docs.amplify.aws/start/getting-started/installation/q/integration/angular
3. Add authentication
4. Start app (ng s)

Expected behavior
NO warnings.

Code Snippet
```WARNING in /Users/ehanchett/programming/work/eig/front/crty-ng-ui/node_modules/@aws-sdk/client-s3/dist/es/runtimeConfig.browser.js depends on @aws-sdk/md5-js. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/ehanchett/programming/work/eig/front/crty-ng-ui/node_modules/@aws-sdk/client-s3/dist/es/runtimeConfig.browser.js depends on @aws-sdk/eventstream-serde-browser. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/ehanchett/programming/work/eig/front/crty-ng-ui/node_modules/@aws-sdk/client-s3/dist/es/runtimeConfig.browser.js depends on @aws-sdk/hash-blob-browser. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/ehanchett/programming/work/eig/front/crty-ng-ui/node_modules/@aws-sdk/client-s3/dist/es/commands/PutBucketTaggingCommand.js depends on @aws-sdk/middleware-apply-body-checksum. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/ehanchett/programming/work/eig/front/crty-ng-ui/node_modules/@aws-sdk/client-s3/dist/es/commands/CreateBucketCommand.js depends on @aws-sdk/middleware-location-constraint. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

**What is Configured?**

//package.json
{
"name": "angular-tour-of-heroes",
"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": "~10.0.0",
"@angular/common": "~10.0.0",
"@angular/compiler": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@aws-amplify/ui-angular": "^0.2.9",
"aws-amplify": "^3.0.18",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0-next.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}

import { Component, OnInit } from '@angular/core';
import { onAuthUIStateChange } from '@aws-amplify/ui-components';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'angular-tour-of-heroes';
constructor(){}
ngOnInit(): void {
onAuthUIStateChange((authState, authData) => {
console.log(authState);
console.log(authData);
});
}
}
```

[Amplifiyer]

These warnings seem to be red-herring and something angular introduced in version 10. See https://github.com/angular/angular-cli/issues/18057 and https://github.com/angular/angular-cli/issues/18058. We will follow these issues closely to see if there are any fixes we can add in the library to suppress them. For now it should be safe to use Amplify library even with the presence of these warnings.

[rudyhadoux]

Hi, the problem is @aws-sdk use in Amplify libraries. @aws-sdk uses CommonJS.

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application.

[gsans]

Remove warnings adding this code

https://gist.github.com/gsans/8982c126c4fef668c094ff288f04241b

[rudyhadoux]

Thanks.

[ErikHDev]

Thanks @gsans, yeah, that worked for me 2. I didn't realize at first I needed to add the values to the right of the depends, not the left.

Too bad AWS uses CommonJS. My bundle size is already huge :(

[rudyhadoux]

There are even more dependencies.

"options": {
"allowedCommonJsDependencies": [
"crypto-js",
"@aws-sdk/eventstream-marshaller",
"zen-push",
"uuid",
"lodash",
"ulid",
"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"
],

[eelayoubi]

I added all necessary libraries to the allowedCommonJsDependencies, but I am still getting the following error:

Uncaught ReferenceError: exports is not defined
at Module../node_modules/@aws-sdk/middleware-serde/build/deserializerMiddleware.js (vendor.js:129105)
at __webpack_require__ (bootstrap:79)
at Object../node_modules/@aws-sdk/middleware-serde/build/index.js (index.ts:1)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/commands/CreateIdentityPoolCommand.js (CognitoIdentityClient.ts:302)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/CognitoIdentity.js (vendor.js:118553)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/index.js (index.ts:1)
at __webpack_require__ (bootstrap:79)

And here is what I added in the angular.json:

"allowedCommonJsDependencies": [
"zen-push",
"lodash",
"ulid",
"@aws-sdk",
"@aws-amplify/pubsub",
"@aws-sdk/client-cognito-identity",
"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"
],

any idea on what I am missing?

[rudyhadoux]

You just have to add missing libraries, like I mentioned.

[eelayoubi]

I have already done that

[rudyhadoux]

So, it is strange...

[eelayoubi]

if you check what is complaining about, it is already in the allowedCommonJsDependencies ... So I don't get it ...

[gsans]

@eelayoubi that seems a different issue. The fix that appears in this thread is to remove the warnings. Your trace is not from a warning but an error.

[eelayoubi]

@gsans you are correct, although the warnings while building the project disappeared, this error stayed in the console. I thought it might be related. I will check again.

[ErikHDev]

@eelayoubi IIRC correctly that occurs when you're in Angular 9/10 and you are using the older @aws-amplify library for angular.

Make sure to use "@aws-amplify/ui-angular",

and

aws-amplify

[eelayoubi]

@ErikHDev as per the tutorial we are installing the latest versions of '@aws-amplify/ui-angular' & 'aws-amplify' (I verified the package.json too).
https://docs.amplify.aws/start/getting-started/setup/q/integration/angular#install-amplify-libraries

and yes, I am using angular 10.

[Jun711]

This is one of the reasons why amplify-js is pretty large in size.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hisham]

Definitely still needed.

[PauloDerney]

@Amplifiyer , some feedback on this problem, i understand that you make use of the CommonJs modules that affect the size of the angular packages, you are plan to release a version using ES modules?

[rob3c]

Hiding the warnings is not a fix - it just masks the problem and probably makes it less likely to be fixed properly.

Which issue can we follow where the use of legacy commonjs modules is being tracked and migration progress can be followed?

[dcchristopher]

As nice as it would be to have an ECMAScript aws-sdk for our Angular apps, it's not a show-stopper. The warnings went away for most of us after updating angular.json to ignore certain Common JS dependencies.

For people looking to shed some aws-sdk weight, consider only importing what you need (which has been available in aws-sdk for the last couple of years):

import Amplify from '@aws-amplify/auth'; // (assuming you only need Cognito)
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

The above sheds almost 10MB in my case (from 13.9MB to 4.27MB, vendor.js).

[gsans]

Issue leaking to other frameworks like Vue. Not only Angular as this results in larger bundle sizes:

https://twitter.com/taseroth/status/1307429119387463680?s=19

[Tyler-V]

Yikes! Lets get a resolution on this, padding allowedCommonJsDependencies is most certainly only a bandaid for the console.

[IonelLupu]

@Tyler-V I think we should talk with the package authors and tell them to update them with the proper module type. Angular just shows the issues with those third-party package.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hobojoe]

Yikes! Lets get a resolution on this, padding allowedCommonJsDependencies is most certainly only a bandaid for the console.

Agree with you! This should be fixed soon!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hobojoe]

Hoping it doesn't get left out .... please work on a fix.

[hanna-becker]

I agree. We're always looking to reduce our bundle sizes with tree-shakable ES6 modules to make for a better customer experience with faster page loading times.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hobojoe]

Keep it alive please!