angular cli bundles umd version instead of esm

[atsjo]

Warning from Angular-cli: Warning: ... depends on 'fast-equals'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I don't have this problem with any other libs exporting multiple module formats, and the problem here is probably that webpack prioritizes the "browser" export instead of "module" in package.json when both are available.

This can be fixed in multiple ways I guess, the esbuild docs (https://esbuild.github.io/api/#main-fields) mentions the below format when mixing browser and module exports...

{ "main": "./node-cjs.js", "module": "./node-esm.js", "browser": { "./node-cjs.js": "./browser-cjs.js", "./node-esm.js": "./browser-esm.js" } }

But maybe using the exports field is a better solution...

[planttheidea]

I can certainly look into this. While the recommendation and documentation you point to is esbuild-specific (which does not apply to this library, as it uses rollup for builds), there is something that is similar available in later versions of npm ... the exports field. This is supported in node starting with version 13.2, and TypeScript starting with version 4.5, so it should help peeps on latest build dependencies. I'll need to do some research, though, to determine precedence over the older main / module / browser setup, and how that looks to determine if it is a breaking change (dropping older infrastructure support always is).

For your immediate needs, though ... it sounds like you are using webpack for your builds? If so, webpack offers the ability to alias dependencies which may help. There are also more broad resolution order options as well, and if you've explicitly set the target (example: target: 'web') then the browser field is ignored (per that documentation). This would also explain why you are seeing the above message, because browser is actually a UMD export; only main is using a CJS export.

Hope this helps, and in the meantime I'll look into the newer export delegation options.

[atsjo]

Angular-cli abstracts away webpack, and give no easy options for customizing the webpack config used internally. It still works with this warning though, it just signals that it might not be able to tree-shake the module properly. I ended up trying dequals, which worked fine.