Firebase CommonJS or AMD dependencies can cause optimization bailouts

angular firebase angularfire
sidali picture sidali · Jul 6, 2020 · Viewed 8k times · Source

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

Answer

Fenix9697 picture Fenix9697 · Jul 19, 2020

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.

Related questions

"ERROR in getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration"

Terminal - "WARNING in Invalid constructor parameter decorator in D:/New folder/SilverLife/node_modules/@angular/fire/fesm2015/angular-fire.js: () => [ { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] } ] ERROR in getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to …

Read More
Angular9: ERROR in The target entry-point "@angular/fire/auth" has missing dependencies

When I run npm run start I get the below error regarding firebase. Tech: Angular version 9, Firebase, Firestore, Geofirestore Angular CLI. Error: ERROR in The target entry-point "@angular/fire/auth" has missing dependencies: - firebase/auth - firebase/app Dependencies …

Read More
Cannot find module '@firebase/app-types/private' - Firebase throws error

I am working on application using angular and firebase. I installed firebase with the instructions given on site and the versions as follows, "angularfire2": "^5.0.0-rc.4", "firebase": "^4.8.1", but the following error comes ERROR in node_modules/@firebase/database/dist/esm/src/…

Read More