Upgrading to Angular 10 - Fix CommonJS or AMD dependencies can cause optimization bailouts
Solution 1
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 ...
]
...
}
...
},
Solution 2
try replacing the rxjs imports rxjs/internal/operators
with rxjs/operators
.
ex:
import { catchError, retry } from 'rxjs/internal/operators';
with
import { catchError, retry } from 'rxjs/operators';
Solution 3
It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules 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 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 angular.json
file.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"rxjs-compat"
]
...
}
...
},
Solution 4
For RXJS library you can do 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'
, which is mentioned in @Janardhan Burle's answer.
Or replace just rxjs
Solution 5
Just change the import:
from:
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
To:
import { BehaviorSubject } from 'rxjs';
Related videos on Youtube
Ora
Updated on December 17, 2021Comments
-
Ora over 2 years
I am trying to upgrade my angular 9 app to angular 10 version, but getting below warning after the upgrade
rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject
Any idea how to fix this?
-
Jonathan Stellwag almost 4 yearsCan you check if you once did not import from rxjs instead from rxjs/behaviorsubject.
-
Ora almost 4 years@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. -
JSON Derulo almost 4 yearsDoes this answer your question? Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailouts
-
-
Ora almost 4 yearsThanks 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.
-
StackOverflowUser almost 4 yearsThis did not get rid of the warning messages for me.
-
Niral Munjariya almost 4 yearsSame for me, I am using lodash and added it to "allowedCommonJsDependencies" but still the same warning. Any idea?
-
JSON Derulo almost 4 years@StackOverflowUser please have a look at this answer: stackoverflow.com/a/62589268/5470544
-
Leonardo Rick over 3 yearsI 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
-
Gunjan Khanwilkar over 3 years@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.
-
Leonardo Rick over 3 yearsIt 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 -
freedev over 3 years@GunjanKhanwilkar any chance you improve your answer explaining clearly why packaging with CommonJS can result in larger slower applications?
-
Gunjan Khanwilkar over 3 years@freedev I have updated the link in my answer! You could find a good explanation here - web.dev/commonjs-larger-bundles Cheers!
-
Antoniossss over 3 yearsAltough 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.
-
bene-we over 3 yearsReplacing with just
'rxjs'
did the trick for me, thanks -
ymssa___ over 3 yearsYes. That should do the job. Glad it could help.
-
Maxim Georgievskiy about 3 yearsFor anyone who searches for the file where it should be added -
angular.json
in the root directory of your project. -
Gunjan Khanwilkar about 3 years@MaximGeorgievskiy Good catch newbies might have difficulties to locate the file.. I have updated the answer for the same thanks!
-
Aniket kale about 3 yearsReplacing with just 'rxjs' did the trick for me too, thanks
-
liakoyras about 3 yearsIs this just suppressing the warning, or does this also help with the optimization?
-
Adel Kedjour about 3 years@liakoyras this is how we import
BehaviorSubject
in RxJS v6+ learnrxjs.io/learn-rxjs/subjects/behaviorsubject -
liakoyras about 3 yearsYes 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).
-
Adel Kedjour about 3 yearsHi @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. auth0.com/blog/whats-new-in-rxjs-6
-
mstgnz over 2 yearsworked angular@12
-
Benjamin Aronsson over 2 yearsThis will only silence the warning, the dependencie will include the entire commonjs in your bundle leading to a bigger bundle size than necesarry
-
Raphael Pinel over 2 yearsFor lodash, use lodash-es instead: npmjs.com/package/lodash-es