amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
345 stars 92 forks source link

Using amcharts as dependency #1742

Open vskorop opened 1 day ago

vskorop commented 1 day ago

Aloha!

I have developed a package that includes a chart component, which can be seen in this example.

When I run the project locally, everything works perfectly, just like in the example. However, when I build the project and use the component as a dependency (with the same data), I encounter the following error:

Cannot read properties of undefined (reading 'get')

This error points to the following amCharts code line:

_handleRangeChange() {
  je(this.series, (e) => {
    let n10 = this.dataItems[this.startIndex()].get("category"),
    i = this.dataItems[this.endIndex() - 1].get("category"),
    a10 = e.get("baseAxis"),
    u = e.get("xAxis"),
    f = e.get("yAxis");
    if (u instanceof _vc && f instanceof _vc) { ... }
  });
}

It seems like amCharts doesn't recognize the data during the UPDATE_CHART_DATA case.

Temporary Workaround I found a workaround by modifying the vite.config.ts file and removing amCharts from the external dependencies, as shown below:

external: [
  'react',
  'react/jsx-runtime',
  '@amcharts/amcharts5',  # <--- Deleted amCharts from externals
]

This approach causes the bundle size to increase significantly (several times larger than before).

Request for Help Is there a better way to resolve this issue without massively increasing the bundle size? How can I properly use amCharts as a dependency inside my package while avoiding this error?

Any insights or recommendations would be greatly appreciated!

Pauan commented 1 day ago

Why are you marking the packages as external?

It's normal to bundle npm dependencies with your app, external is for advanced use-cases.