Firebase CommonJS or AMD dependencies can cause optimization bailouts

Question

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

[keep track of this](https://github.com/angular/angular-cli/issues/18025). you may need to use `allowedCommonJsDependencies` in `angular.json` file for now — boop_the_snoot, Jul 06 '20 at 11:51

score 37 · Answer 1 · edited Aug 26 '20 at 23:21

37

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.

edited Aug 26 '20 at 23:21

Muhammad bin Yusrat

1,433
1
14
19

answered Jul 19 '20 at 02:43

Fenix9697

369
3
5

2

Thanks 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? – Ian Poston Framer Jul 20 '20 at 19:23
No, it is exactly what suggests official documentation, for more details see the URL below https://angular.io/guide/build#configuring-commonjs-dependencies – Gh111 Jul 22 '20 at 17:02
2

@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 - https://stackoverflow.com/a/62604034/6097025. And to fix this bundle warning you need to find the right ES6 compatible bundle for it. – Gunjan Khanwilkar Aug 15 '20 at 19:58
The official documentation suggests to suppress the warnings only, but they should still be fixed mainly by the firebase team. – Jonathan Aug 23 '20 at 03:11
@Jonathan https://github.com/angular/angularfire/issues/2478; we need to ba patient – Walter Luszczyk Sep 22 '20 at 10:23

Gunjan Khanwilkar · Answer 2 · 2020-12-05T23:04:27.003

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

While this works, we shouldn't have to. Especially considering the Angular team should have been communicating with the Firebase team. — Jonathan, Dec 05 '20 at 22:24
Does Firebase have a 'CommonJS free' version yet? A version of library which uses only ECMAScript modules? — Kyle Vassella, Aug 12 '22 at 07:04

Firebase CommonJS or AMD dependencies can cause optimization bailouts

2 Answers2

Linked