CommonJS or AMD dependencies can cause optimization bailouts

# CommonJS or AMD dependencies can cause optimization bailouts

The Angular warning "CommonJS or AMD dependencies can cause optimization bailouts" is caused when a third-party package you are using is packaged with CommonJS only.

To resolve the issue, add the package that caused the warning in the allowedCommonJsDependencies array in your angular.json file.

Here is the complete error message.

shell

Copied!
Warning: /node_modules/package/esm2015/decorator/string/file.js depends on 'X'. CommonJS or AMD dependencies can cause optimization bailouts.

For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Note that your error message will contain information as to which package caused the issue.

Modules that have been bundled using only CommonJS usually produce larger bundles.

Therefore Angular warns you that the third-party module doesn't support the ES6 import/export syntax.

You could contact the maintainer of the package to check if they'd be able to offer support for the ES6 import/export syntax or you can add the package to your allowedCommonJsDependencies array.

# Adding the package to `allowedCommonJsDependencies` in `angular.json`

Open your angular.json file (it is located in the root directory of your project, next to package.json).
Look for your architect > build > options property.
Add the allowedCommonJsDependencies under options.
Set the allowedCommonJsDependencies to an array of the packages that cause the warning.

set allowed commonjs dependencies array

angular.json

Copied!
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "allowedCommonJsDependencies": [
      "rxjs-compat",
      "validator",
      "twilio-video",
      "chartjs",
      "lodash"
    ],
  }
}

The example uses the rxjs-compat, validator and twilio-video packages but many other packages also cause the warning.

You have to look at your warning message to determine which packages you have to add to the allowedCommonJsDependencies array.

Make sure to specify the correct name of the package as shown in the dependencies or devDependencies objects in your package.json file.

Once you add the packages that were bundled only using CommonJS to allowedCommonJsDependencies, the issue should be resolved.

The Angular docs recommend that you avoid using dependencies that are CommonJS-only.

Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application and deleting unused code.

Instead, the packages that you rely on should use the ES6 import/export syntax (ES Modules).

If the Angular CLI detects that one of your packages is CommonJS-only, it shows the warning.

In some cases, you might not be able to switch the module, so you can add the name of the CommonJS module to your allowedCommonJsDependencies array in angular.json.

# Correct your import statements when using RxJS

If you got the warning when using RxJS, you can also try to replace the following import.

index.ts

Copied!
// ⛔️ Incorrect import
import { catchError, retry } from 'rxjs/internal/operators';

With the following import.

index.ts

Copied!
// ✅ Correct import
import { catchError, retry } from 'rxjs/operators';

You can also try to import from just rxjs.

index.ts

Copied!
// ✅ Correct import
import { catchError, retry } from 'rxjs';

You have to replace imports such as 'rxjs/internal/<XYZ>' and 'rxjs/index with just rxjs.
You have to replace imports such as 'rxjs/internal/operators' with 'rxjs/operators' or just rxjs.

Importing from the root rxjs module often solves the issue without making any other changes.

index.js

Copied!
import { BehaviorSubject } from 'rxjs';

If updating your import statements, didn't work, add the module from the warning message to your allowedCommonJsDependencies array as shown in the previous subheading.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

CommonJS or AMD dependencies can cause optimization bailouts