Angular ignores the ESM code in my npm package, still gives CommonJS optimization bailout warning

[kshetline]

Description

I want to author (not consume!) an npm package, which itself contains no Angular code, so that it can be used in an Angular 10+ project without getting CommonJS optimization bailout warnings.

I do not want to merely suppress these warnings using "allowedCommonJsDependencies", but attack the root cause of the warnings.

My package already contains ESM-style modules, as well as CommonJS (and even minified UMD). There are both ES6 (ES2015) and ES5 code versions available. Here's the start of my package.json:

{
  "name": "@tubular/util",
  "version": "3.3.0",
  "description": "Miscellaneous utility functions",
  "browser-es5": "dist/web5/index.js",
  "browser-es6": "dist/web/index.js",
  "main": "dist/es5/index.js",
  "module": "dist/index.js",
  "es2015": "dist/es6/index.js",
  "esm2015": "dist/index.js",
  "typings": "dist/index",
  "sideEffects": false,

The code at dist/index.js looks like this:

export * from './browser-graphics-util';
export * from './browser-util';
export * from './misc-util';
export * from './string-util';

...and all the code that is exported above is written in the ESM style, using import, not require.

So why is Angular complaining about the CommonJS code, instead of happily grabbing the ESM code and using that instead, without any need for warnings?

Full source code here: https://github.com/kshetline/tubular_util

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-zqghjw?file=src/app/hello.component.ts

Since stackblitz doesn't show the warnings that can be seen when doing npm start or npm run build, so you'll have to download this project to see the problem. I suspect you've all see the warning before anyway:

WARNING in /Users/kshetline/programming_projects/svc-ng/node_modules/@tubular/time/dist/date-time.js depends on '@tubular/util'. CommonJS or AMD dependencies can cause optimization bailouts.

🔥 Exception or Error

WARNING in /Users/kshetline/programming_projects/svc-ng/node_modules/@tubular/time/dist/date-time.js depends on '@tubular/util'. CommonJS or AMD dependencies can cause optimization bailouts.

(Not the exact error produced by the stackblitz sample code, but same general idea.)

🌍 Your Environment

Angular Version:

Angular CLI: 10.2.1
Node: 14.15.1
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.1
@angular-devkit/build-angular   0.1002.1
@angular-devkit/core            10.2.1
@angular-devkit/schematics      10.2.1
@angular/cdk                    9.2.4
@angular/cli                    10.2.1
@angular/flex-layout            9.0.0-beta.31
@schematics/angular             10.2.1
@schematics/update              0.1002.1
rxjs                            6.6.3
typescript                      3.9.7

Also happens in Angular 11.

[petebacondarwin]

I downloaded the stackblitz and built it locally. But it does not trigger this warning. This is probably because it does not depend upon @tubular/time. I'll try adding that.

[alan-agius4]

I did manage to replicate this behaviour. It appears that the es2015 field is pointing to bundle which is CommonJS.

Example: https://unpkg.com/browse/@tubular/util@3.3.0/dist/es6/string-util.js

We just the following fields to determine which entrypoint to use. (First one wins)

• es2015
• browser
• module
• main

[kshetline]

Ah, I would have expected "esm2015", with the "m" for module, would have been first priority! But "esm2015" isn't even in the list? Very weird. I'm also surprised "browser" is the second choice, since I'd think "browser" would be for something like a UMD.

Is this priority list documented somewhere? I certainly searched quite a bit, and never found any clear guidance.

I shall amend my package.json accordingly now that I know, and see if the problem is fixed.

[alan-agius4]

It is briefly mentioned in the Angular package format spec.

While, in Angular libraries we do have an esm2015 property, this is ignored as in some cases it ends up slowing down the build because of more input files and increase bundle sizes, hence we point es2015 to our Flat ES Module (FESM).

[kshetline]

Updating my package.json so that es2015 points to the ESM code, not the CommonJS code, does the trick. I just dropped esm2015. Thanks!

[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.}