CODEWITHSUNDEEP
javascriptangularrxjsrxjs6angular-upgrade
Ora
Ora

Reputation: 2119

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

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?

Upvotes: 199

Views: 312561

Answers (11)

Laith Bzour
Laith Bzour

Reputation: 111

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"
        ]
      }
    }
  }
}

Upvotes: 6

Abdullah
Abdullah

Reputation: 2953

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

Add missing / suggested dependency in build -> allowedCommonJsDependencies

enter image description here

enter image description here

Upvotes: 3

ymssa___
ymssa___

Reputation: 1073

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.

Upvotes: 33

mego4iter
mego4iter

Reputation: 430

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.

Upvotes: -2

Dacili
Dacili

Reputation: 388

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".

Upvotes: 4

atconway
atconway

Reputation: 21304

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';

Upvotes: 6

Janardhan Burle
Janardhan Burle

Reputation: 1457

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';

Upvotes: 115

Arun Kumar
Arun Kumar

Reputation: 1579

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

Upvotes: 68

Gunjan Khanwilkar
Gunjan Khanwilkar

Reputation: 2495

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 ... 
     ]
     ...
   }
   ...
},

Upvotes: 213

Adel Kedjour
Adel Kedjour

Reputation: 101

Just change the import:

from:

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

To:

import { BehaviorSubject } from 'rxjs';

Upvotes: 10

wajdar_pl
wajdar_pl

Reputation: 21

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';

Upvotes: 2

Related Questions