search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.42k stars 1.31k forks source link

Default export of apexcharts.esm.js is SVG.js, not ApexCharts #1760

Open snapwich opened 4 years ago

snapwich commented 4 years ago

Bug report

Codepen

I think most of the examples that use webpack are broken, but I was looking specifically at this one: https://codesandbox.io/s/o7339qql3z

Explanation

This results in TypeError: this.chart.render is not a function

If you debug vue-apexcharts you'll see it breaks on this code

        var config = this.extend(this.options, newOptions);
        this.chart = new ApexCharts(this.$el, config);
        return this.chart.render();

and if you step into ApexCharts you'll see you end up in the SVG constructor function here: https://github.com/apexcharts/apexcharts.js/blob/master/src/svgjs/svg.js#L24 rather than in the ApexCharts class constructor.

If I had to guess I'd say the UMD wrapper around SVGJS is confusing the module output from rollup and switching the default export. I think the latest versions of webpack uses the package.json#module field to determine the bundle, so I think this bug breaks builds using apexcharts inside a webpack build (I used parcel to test, which is also broken) while projects that use the other bundles seem unaffected.

I think this is related to the same issue here: https://github.com/apexcharts/vue-apexcharts/issues/64

junedchhipa commented 4 years ago

That's very interesting. I was wondering why all of the code-sandboxes stopped working without any reason recently. I am not very good with bundlers, so if anyone has ideas about how to solve it, please suggest.

kinekt4 commented 3 years ago

@junedchhipa Can you clarify your previous comment. Are you saying that ApexCharts doesn't support bundlers such as webpack atm? Because that seems to be my understanding based on this issue and another issue I've raised: https://github.com/apexcharts/apexcharts.js/issues/2315

TotallyInformation commented 2 years ago

I think this may be also related to the reason you cannot use the esm module directly in a modern browser.

image

It is the 21st Century, could we please have a nice chart library that can be used with an ECMA module without having to run a build process? That would be fantastic!

pmario commented 1 year ago

Hi foks. Nice project. I'm just curious. Is this still a problem, or just forgotten to be closed?

rtpHarry commented 7 months ago

I'm not totally clued up here, but looking at the source code for the latest version of the library, i'm not seeing the module code at the start:

https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.0/svg.js

vs the one that's included in this repo:

https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js

However, there are breaking changes between v2 and v3 which are documented in the changelog:

https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md

So it would take a bit of work to update it in this project, and then test reverting the change that disabled the ESM module to fix https://github.com/apexcharts/ng-apexcharts/issues/92