Firebase CommonJS or AMD dependencies can cause optimization bailouts
Solution 1
To get rid of these warnings, you can specify the following option in your angular.json
:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"lodash",
"firebase",
"@angular/common/locales/fr",
"lodash/dropRight",
"@firebase/app",
"firebase/app",
"@firebase/database",
"@firebase/firestore",
"@firebase/functions",
"@firebase/performance",
"@firebase/remote-config"
],
I hope it has helped you.
Solution 2
When you use a dependency that is packaged with CommonJS, it can result in larger slower applications
Starting with version 10, Angular now warns you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.
Here is an official documentation - Configuring CommonJS dependencies
You need to update angular.json like this :
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"firebase",
"@firebase/app",
"@firebase/database",
"@firebase/firestore",
"@firebase/functions",
"@firebase/performance",
"@firebase/remote-config",
"@firebase/component",
.... etc ...
]
...
}
...
},
You can find the same answer in my previous post - https://stackoverflow.com/a/62604034/6097025
Related videos on Youtube
Sid Ali
full stack web developer, founder and owner of yet.marketing
Updated on June 04, 2022Comments
-
Sid Ali almost 2 years
After Angular 10 update, i have these warnings about Firebase and CommonJS or AMD dependencies !
WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.component.ts depends on 'firebase'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.module.ts depends on '@angular/common/locales/fr'. When using the 'localize' option this import is not needed. Did you mean to import '@angular/common/locales/global/fr'? For more info see: https://angular.io/guide/i18n#import-global-variants-of-the-locale-data WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/services/crud/crud.service.ts depends on 'lodash/dropRight'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js depends on 'firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/database'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/firestore'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/functions'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/performance'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/remote-config'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
-
boop_the_snoot almost 4 years
-
-
Ian Poston Framer almost 4 yearsThanks this made my warning errors go away.
"allowedCommonJsDependencies": [ "@firebase/app", "firebase/app", "@firebase/database", "@firebase/util", "@firebase/component", "@firebase/auth"]
. Is this just a patch to hide the warnings? do you think there is a better way to do this for better build optimization? -
Gh111 almost 4 yearsNo, it is exactly what suggests official documentation, for more details see the URL below angular.io/guide/build#configuring-commonjs-dependencies
-
Gunjan Khanwilkar over 3 years@IanPostonFramer Yes, this is a workaround to suppress warnings. You can find the real cause why this is started happening after Angular 10 upgrade here - stackoverflow.com/a/62604034/6097025. And to fix this bundle warning you need to find the right ES6 compatible bundle for it.
-
Jonathan over 3 yearsThe official documentation suggests to suppress the warnings only, but they should still be fixed mainly by the firebase team.
-
Walter Luszczyk over 3 years@Jonathan github.com/angular/angularfire/issues/2478; we need to ba patient
-
Jonathan over 3 yearsWhile this works, we shouldn't have to. Especially considering the Angular team should have been communicating with the Firebase team.