Upgrading to Angular 10 - Fix CommonJS or AMD dependencies can cause optimization bailouts

Question

I am trying to upgrade my Angular 9 app to Angular 10 version, but I am getting the below warning after the upgrade

rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject

How can I fix this?

Can you check if you once did not import from rxjs instead from rxjs/behaviorsubject. — Jonathan Stellwag, Jun 26 '20 at 11:10
@JonathanStellwag I have imported it like this - `import { BehaviorSubject } from 'rxjs'` and everything works fine for Angular 9. But for Angular 10 it does not. I am facing the same issue for map operator as well - It says WARNING in ..\node_modules\rxjs\operators\map.js depends on rxjs-compat/operators/map. CommonJS or AMD dependencies can cause optimization bailouts. — Ora, Jun 26 '20 at 11:23
Does this answer your question? [Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailouts](https://stackoverflow.com/questions/62589229/angular-10-upgrade-fix-commonjs-or-amd-dependencies-can-cause-optimization-bai) — JSON Derulo, Jul 14 '20 at 13:28

Gunjan Khanwilkar · Answer 1 · 2021-03-22T13:38:55.347

187

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

In your angular.json file look for the build object and add

allowedCommonJsDependencies

as shown below -

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "rxjs-compat",
         ... few more commonjs dependencies ... 
     ]
     ...
   }
   ...
},

edited Mar 22 '21 at 13:38

answered Jun 26 '20 at 23:06

Gunjan Khanwilkar

2,227
2
11
13

I can't find the key word to suprress on my case: `WARNING in /home/leonardo/iq/web-iqbot/node_modules/@firebase/app/dist/index.cjs.js depends on '@firebase/component'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies` – Leonardo Rick Aug 15 '20 at 18:15
3

@LeonardoRick Try putting something like this for firebase dependencies: "allowedCommonJsDependencies": [ "firebase", "@firebase/app", "firebase/app", "@firebase/functions", "@firebase/performance", "@firebase/remote-config", "@firebase/component" ], In your case just add '@firebase/component' keyword in the existing list and it should work. – Gunjan Khanwilkar Aug 15 '20 at 19:42
It worked! Thank you. In my case it was multiple warnings inside `@firebase` and It only dissapeared when I added all of them as allowed. I was trying to make them dissapear one by one – Leonardo Rick Aug 15 '20 at 21:19
@GunjanKhanwilkar any chance you improve your answer explaining clearly why packaging with CommonJS can result in larger slower applications? – freedev Sep 07 '20 at 09:31
1

@freedev I have updated the link in my answer! You could find a good explanation here - https://web.dev/commonjs-larger-bundles/ Cheers! – Gunjan Khanwilkar Sep 08 '20 at 13:30
2

For anyone who searches for the file where it should be added - `angular.json` in the root directory of your project. – Maxím G. Mar 21 '21 at 16:11
1

@MaximGeorgievskiy Good catch newbies might have difficulties to locate the file.. I have updated the answer for the same thanks! – Gunjan Khanwilkar Mar 22 '21 at 13:35
1

worked angular@12 – mstgnz Dec 20 '21 at 05:38
works like a charm for `sweetalert2` and `moment` on Angular 14 – Stefanos Chrs Jan 25 '23 at 08:59

score 113 · Answer 2 · edited Aug 22 '22 at 22:07

113

Try replacing the rxjs imports rxjs/internal/operators with rxjs/operators.

Example:

import { catchError, retry } from 'rxjs/internal/operators';

with

import { catchError, retry } from 'rxjs/operators';

edited Aug 22 '22 at 22:07

Peter Mortensen

30,738
21
105
131

answered Jul 14 '20 at 12:18

Janardhan Burle

1,417
1
4
7

score 58 · Answer 3 · edited Aug 22 '22 at 22:05

58

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on the CommonJS modules, they 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.

Still, if you don't care about your bundling size, to disable these warnings, you can add the CommonJS module name to allowedCommonJsDependencies option in the build options located in the angular.json file.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "rxjs-compat"
     ]
     ...
   }
   ...
},

Source

edited Aug 22 '22 at 22:05

Peter Mortensen

30,738
21
105
131

answered Jun 26 '20 at 11:22

Arun Kumar

1,449
1
17
33

25

Thanks for answering. I would still like to know if there are any ECMAScript modules that are recommended as it's substitute? instead of disabling the warnings. – Ora Jun 26 '20 at 11:28
8

This did not get rid of the warning messages for me. – StackOverflowUser Jun 27 '20 at 18:33
Same for me, I am using lodash and added it to "allowedCommonJsDependencies" but still the same warning. Any idea? – Niral Munjariya Jun 30 '20 at 12:10
1

@StackOverflowUser please have a look at this answer: https://stackoverflow.com/a/62589268/5470544 – JSON Derulo Jul 01 '20 at 18:27
2

Altough advice is correct, it assumes it is I that uses CommonJS or AMD, while the most common scenario is that I am using 3rd party lib that dependes on those. – Antoniossss Oct 22 '20 at 06:36
For lodash, use lodash-es instead: https://www.npmjs.com/package/lodash-es – Raphael Pinel Jan 21 '22 at 05:34

ymssa___ · Answer 4 · 2022-11-03T07:20:45.700

31

For the RXJS library you can do the following changes.

For imports, such as 'rxjs/internal/<anything>' and 'rxjs/index', replace it with just 'rxjs'.

For imports such as 'rxjs/internal/operators', replace it with 'rxjs/operators'.

Or replace just rxjs.

edited Nov 03 '22 at 07:20

answered Nov 13 '20 at 13:49

ymssa___

993
9
16

1

Replacing with just `'rxjs'` did the trick for me, thanks – bene-we Dec 06 '20 at 10:24
Replacing with just 'rxjs' did the trick for me too, thanks – Aniket kale Apr 07 '21 at 12:13
1

Does this fix the issue or just hide the warning? – Brian Reinhold Apr 10 '23 at 21:25
1

@ymssa___ I noted that it does. Shrank the size of my build a fair amount! – Brian Reinhold Apr 14 '23 at 22:46

score 9 · Answer 5 · answered Mar 14 '21 at 14:01

9

Just change the import:

from:

import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

To:

import { BehaviorSubject } from 'rxjs';

answered Mar 14 '21 at 14:01

Adel Kedjour

91
1
2

3

Is this just suppressing the warning, or does this also help with the optimization? – liakoyras Apr 14 '21 at 09:18
@liakoyras this is how we import `BehaviorSubject ` in RxJS v6+ https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject – Adel Kedjour Apr 15 '21 at 10:50
1

Yes I understand that, my question is wether the new way helps only with suppressing the compiler warning, or is v6+ indeed a new ES6 modulization for rxjs (while the older versions were CommonJS). – liakoyras Apr 15 '21 at 12:24
2

Hi @liakoyras sorry for late replay. The RxJS 6 brings improvements in modularity, a boost in performance and easier to debug call stacks. The RxJS team has made a solid effort on making this release as backward compatible as possible. https://auth0.com/blog/whats-new-in-rxjs-6/ – Adel Kedjour Apr 19 '21 at 09:27

score 5 · Answer 6 · edited Aug 22 '22 at 22:10

Another case of this is the problem being warned about during the build with the use of BehaviorSubject from rxjs when using the following style of imports:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

It results in the following error:

Warning: my.service.ts depends on 'rxjs/BehaviorSubject'. CommonJS or AMD dependencies can cause optimization bailouts.

By importing from the root module instead, the warning is no longer present during the build:

import { BehaviorSubject } from 'rxjs';

score 3 · Answer 7 · edited Aug 09 '23 at 04:56

3

to fix this issue on the terminal in angular.json put this line in :

{
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "allowedCommonJsDependencies": [
          "rxjs"
        ]
      }
    }
  }
}

edited Aug 09 '23 at 04:56

Kishan Donga

2,851
2
23
35

answered Nov 10 '22 at 06:01

Laith Bzour

71
3

1

Is this a fix? This just hides the warning, correct? The problem is still there. – Brian Reinhold Apr 10 '23 at 21:22

score 2 · Answer 8 · answered Mar 12 '21 at 07:29

2

In my case (after update to TypeScript version 3.9.7) flatMap is deprecated (from rxjs/operators). This is alias for mergeMap, so just I replaced:

import { flatMap } from 'rxjs/internal/operators';

to

import { mergeMap } from 'rxjs/operators';

answered Mar 12 '21 at 07:29

wajdar_pl

21
1

score 2 · Answer 9 · edited Aug 22 '22 at 22:14

2

I had a similar issue (app.module.ts depends on 'ngx-google-places-autocomplete'), but many answers did not help me.

So if you have x depends on y, just add y in the angular.json file in "allowedCommonJsDependencies".

edited Aug 22 '22 at 22:14

Peter Mortensen

30,738
21
105
131

answered Dec 17 '21 at 08:49

Dacili

258
4
8

This will only silence the warning, the dependencie will include the entire commonjs in your bundle leading to a bigger bundle size than necesarry – Benjamin Aronsson Dec 21 '21 at 19:20

score 0 · Answer 10 · answered Aug 02 '23 at 10:45

0

I was facing the same issue in Angular - 15.1.1 while build for the production

Add missing / suggested dependency in build -> allowedCommonJsDependencies

answered Aug 02 '23 at 10:45

Abdullah

2,393
1
16
29

score -2 · Answer 11 · edited Aug 22 '22 at 22:27

-2

I have a very big project with deprecated imports 'rxjs' and create this script for upgrading all deprecated imports:

python3.6 replace_imports.py PATH_TO_SRC_DIR

This script upgrades the import like "rxjs\/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)" to import { * } from rxjs

Also try to upgrade rxjs-compat.

edited Aug 22 '22 at 22:27

Peter Mortensen

30,738
21
105
131

answered Apr 15 '21 at 11:47

mego4iter

320
1
2
9

Upgrading to Angular 10 - Fix CommonJS or AMD dependencies can cause optimization bailouts

11 Answers11

Linked