Warning In angular 10 - Githubissues

yeshwanthmn commented 4 years ago

When I start the angular 10 app I am getting below mentioned warning ng-apexcharts__ivy_ngcc__fesm2015 g-apexcharts.js depends on 'apexcharts'. CommonJS or AMD dependencies can cause optimization bailouts.

IsaacSomething commented 4 years ago

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

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

j-a-h-i-r commented 4 years ago

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

stefanolsenn commented 3 years ago

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.

junedchhipa commented 3 years ago

@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.

stefanolsenn commented 3 years ago

What issues are we talking about here?

junedchhipa commented 3 years ago

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.

stashaway commented 3 years ago

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.

MNorgren commented 2 years ago

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

AmirSavand commented 2 years ago

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

AmirSavand commented 2 years ago

@muhammadtayab257 That's just ignoring the warning.

VitorBarleta commented 2 years ago

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

rtpHarry commented 11 months ago

Seeing this as well with Angular 16 :/

jeroen1602 commented 2 months ago

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 };
            ╵ ~~~~~~
``

apexcharts / ng-apexcharts

Warning In angular 10 #92