This issue can be removed by adding "apexcharts" to the allowedCommonJsDependencies in your angular.json file

"architect": {
        "build": {
             "options": {
                  "allowedCommonJsDependencies":

@IsaacSomething, this will only suppress the warning and not actually fix the issue causing this warning.

That's because this lib is depending on the CommonJS module instead of the ESM (surprise)

I see that they changed the import from the ESM to the min version, and later removed the deep import to get rid of the ivy warning. See #79
@junedchhipa Maybe you could clarify a bit on that decision? I would rather silence the deep import warning, than my bundle size increases.

@stefanolsenn The ESM module caused issues in all libraries (react/vue/angular) because of the way it was generated.
I haven't found a fix for that and hence it was removed.

What issues are we talking about here?

There is a 3rd party library called svg.js being bundled inside.
Instead of the main ApexCharts being exposed, SVG was exposed from the ESM module.

Any news on this? Seems like the svg.js being exposed is an issue that could be solved. As Angular moves pretty fast, it would be great to not have optimization bailouts in the current versions.

Any updates on this? apexcharts is 25% of my apps bundle size.

Any update on this? Is this a time-consuming bug to fix?

@muhammadtayab257 That's just ignoring the warning.

Any update on this issue? I just updated from Angular 13 (everything was ok) to Angular 14 and this warning started to appear.

Seeing this as well with Angular 16 :/

I found that manually adding:

"es2020": "dist/apexcharts.esm.js",

to the package.json of the apexchart package makes it so that the Angular compiler can find the correct ESM version.

So to get this fixed we would need to get this field added to the apexcharts library.

Here is the order that Angular uses to find the entry point in a package:
https://github.com/angular/angular-cli/blob/d6a34034d7489c09753090642ade4c606cd98ece/packages/angular/build/src/tools/esbuild/application-code-bundle.ts#L50

EDIT: It does come with this warning if you run ng build --verbose. But I did a quick test and everything seems to work just fine, so I think it can be ignored.

● [DEBUG] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]

    node_modules/apexcharts/dist/apexcharts.esm.js:16997:111:
      16997 │ }) : "object" === ("undefined" == typeof exports ? "undefined" : i(exports)) && "undefined" != typeof module ? module.exports = Rt.document ? Ht(Rt, Rt.document) : function (t) {
            ╵                                                                                                                ~~~~~~

  This file is considered to be an ECMAScript module because of the "export" keyword here:

    node_modules/apexcharts/dist/apexcharts.esm.js:18423:0:
      18423 │ export { _t as default };
            ╵ ~~~~~~
``