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

[snapwich]

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:
apexcharts/vue-apexcharts#64

[junedchhipa]

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]

@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: #2315

[TotallyInformation]

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

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]

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

[rtpHarry]

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 apexcharts/ng-apexcharts#92