Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firebase CommonJS or AMD dependencies can cause optimization bailouts

Tags:

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 
like image 833
sidali Avatar asked Jul 06 '20 08:07

sidali


2 Answers

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.

like image 105
Fenix9697 Avatar answered Sep 22 '22 10:09

Fenix9697


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

like image 20
Gunjan Khanwilkar Avatar answered Sep 24 '22 10:09

Gunjan Khanwilkar