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

Question

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

WARNING in calendar.reducer.ts depends on lodash/keys. CommonJS or AMD dependencies can cause optimization bailouts.

I have added below line to my angular.json file but issue is not resolved

"allowedCommonJsDependencies": ["lodash"]

How can I fix above issue.

This question is not a duplicate of the linked question. It has been asked and answered earlier. Additionally, the other question is about RxJS, this question is about lodash. They are similar, but not duplicate. Please re-open. — JSON Derulo, Jun 26 '23 at 11:07

JSON Derulo · Accepted Answer · 2023-06-26T10:46:48.240

213

The npm package lodash itself is not an ECMAScript module and therefore produces the warning. As a result, you may have a significantly increased bundle size, as the compiler is not able to perform tree-shaking. Here is how you can get rid of the warning:

Replace with ES modulized library (recommended)

Some libraries offer ES modulized builds. In case of lodash, you can replace it with lodash-es.

Run npm install --save lodash-es.

Now replace all imports from lodash with lodash-es.

Also make sure to import the library with ES import statements:

import { keys } from 'lodash-es';

Whitelist CommonJS dependency

If there is no ES modulized build available for your library, or if you for some reason don't care, you can allow specific CommonJS dependencies in the angular.json file (this may significantly increase the bundle size of your application):

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

Since Angular CLI Version 10.0.1 you can use globs in allowedCommonJsDependencies. This means that if you pass lodash, the sub-paths (e.g. lodash/keys) will also be allowed.

Docs reference: https://angular.io/guide/build#configuring-commonjs-dependencies

edited Jun 26 '23 at 10:46

answered Jun 26 '20 at 06:33

JSON Derulo

9,780
7
39
56

1

Tried it but issue still exist – RRR Jun 26 '20 at 06:49
Imported like this - import keys from 'lodash/keys' – RRR Jun 26 '20 at 06:58
Getting error like cannot find module 'lodash-es', do I need to npm install 'lodash-es' ? – RRR Jun 26 '20 at 07:09
2

yes you need to install `lodash-es`. I'm updating my answer to make it more clear – JSON Derulo Jun 26 '20 at 07:10
11

`Property allowedCommonJsDependencies is not allowed.` – Basheer Kharoti Jul 14 '20 at 04:29
2

@Cleancode did you put it to the right place? (`architect` - `build` - `options`) Updated my answer, now it should be more clear where to put it. – JSON Derulo Jul 14 '20 at 07:46
Yes, I did and it was working before. Just cleaned the `npm cache` and let me try reinstalling the packages – Basheer Kharoti Jul 14 '20 at 12:08
Here is a packaged version of lodash-es : https://www.npmjs.com/package/lodash-es. Now you can build it yourself with lodash CLI. – Alain Boudard Oct 13 '20 at 11:17
2

@Basheer Kharoti make sure you put it in "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": {} – Alex Russell Dec 04 '20 at 11:46
1

@BasheerKharoti it should go away after npm install – inorganik Jan 12 '21 at 20:07
Whitelist CommonJS dependency for lodash and moment works for me. sample: `"allowedCommonJsDependencies": ["lodash", "moment"],` – Mario Sep 22 '22 at 15:46
I get this for 'moment.js'. What is his ES version which I can install in Angular project? – Mihai Socaciu Oct 03 '22 at 13:25

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

1 Answers1

Replace with ES modulized library (recommended)

Whitelist CommonJS dependency

Linked