Build produces CommonJS / AMD dependencies optimization bailouts warning

[json-derulo]

🐞 bug report

Is this a regression?

Yes, it worked fine in Angular 9

Description

Since Angular 10, when having a library with an application in the same workspace, and in the library an ECMAScript module from lodash (and maybe other libraries?) is used, a build warning is produced when building the application using code from the library.

For example, this code in the library produces a warning:

import { filter } from 'lodash';

The warning says something about CommonJS and AMD dependencies, but this is an ECMAScript module, so I don't really understand why the warning is thrown.

🔬 Minimal Reproduction

Demo project: https://github.com/json-derulo/angular-commonjs-warning

Check out the code and run ng build

The code with the ECMAScript import is located in projects/test-library/src/lib/test-library.service.ts

🔥 Exception or Error

WARNING in C:\Projects\lodash-test\projects\test-library\src\lib\test-library.service.ts depends on lodash. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.0
Node: 12.17.0
OS: win32 x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.0
@angular-devkit/build-angular      0.1000.0
@angular-devkit/build-ng-packagr   0.1000.0
@angular-devkit/build-optimizer    0.1000.0
@angular-devkit/build-webpack      0.1000.0
@angular-devkit/core               10.0.0
@angular-devkit/schematics         10.0.0
@ngtools/webpack                   10.0.0
@schematics/angular                10.0.0
@schematics/update                 0.1000.0
ng-packagr                         10.0.0
rxjs                               6.5.5
typescript                         3.9.5
webpack                            4.43.0

[json-derulo]

Well next time I need to read the error message more carefully.

It says that the lodash library is based on CommonJS or AMD, which is correct.

So in case you are using lodash, you can replace it with lodash-es.

For more info, see this SO answer: https://stackoverflow.com/a/62589268

[alan-agius4]

Hi @json-derulo,

The problem here is that lodash itself is a non ECMA module. https://unpkg.com/lodash@4.17.15/lodash.js

You can read more about this here: https://angular.io/guide/build#configuring-commonjs-dependencies which also shows how to suppress the warning if you are not interesting in fixing it right away.

[stingers]

Hi have same issue @json-derulo

[json-derulo]

@stingers if possible replace the dependency with a library that itself is an ES module.
Or if you don't care about your bundle size, you can suppress the warning as described here: https://angular.io/guide/build#configuring-commonjs-dependencies

[stingers]

@json-derulo thanks. but more about ' ...the dependency with a library that itself is an ES module.'

[alejandrocoding]

I am having the same problem but with importing my own Angular component through TS aliases. I am trying to reproduce this is a separate new project but haven't figure out how just yet.

The message is like this:

WARNING in /Users/alex/Desktop/CompanyName/ProjectName/src/app/app-routing.module.ts depends on @auth/auth-callback/auth-callback.component. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Any idea?

[stingers]

@alejandrocoding this example is more explicite:
1 in my project i created DocComponent with angular-cli => component is declare in AppModule
2 I created with again with angular-cli for Doc ( doc.module, doc-routing.module).
and now come the warning ...... https://angular.io/guide/build#configuring-commonjs-dependencies.
Solution: just remove declaration of DocComponent from AppModule and put it in DocModule. Do same for others components
I hope that help

[alejandrocoding]

Thanks @stingers for sharing ideas.

I have feature modules and lazy loading modules in this project. I have double checked your suggestion but it seems to be only declared once within its own module, so it doesn't seem to be the problem. I have actually checked a few.

I am getting tons of warning like this, so as part of my findings what I have figured out is that removing the TS Alias

import { x } from '@auth/auth....'           // don't work
...to...
import { x } from '../auth/...'              // works

And the warning goes away. I have done it for 3 different components and the 3 warnings disappeared.

[json-derulo]

Guys I think you should open a new issue for this. That seems to be another problem...

[alejandrocoding]

I thought it was ok to chat about it since the error is closed and I might get any related ideas but yeah, you are right, let's leave it here

I won't open an issue until I can reproduce the error, otherwise, it will be more noise to the team with no value.

Thanks!

[stingers]

@alejandrocoding if you are on vscode use in setting.json
"typescript.preferences.importModuleSpecifier": "non-relative", to avoid some problems with import
import { x } from '@auth/auth....' or import { x } from '../auth/...'

[parthdevloper]

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

Solution: edit angular.json & add those dependencies

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "hammerjs",
        "ngx-quill"
     ]
     ...
   }
   ...
},

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}