Broken import in dist/types/components.d.ts

[thccorni]

It seems that with v2.2.0 the dist bundle broke.

I'm getting the following error:

[ ERROR ]  TypeScript: ./node_modules/stencil-apexcharts/dist/types/components.d.ts:8:139
           Cannot find module './components/apex-chart' or its corresponding type declarations.

      L7:  import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
      L8:  ackType, ApexChartToolbar, ApexChartType, ApexChartWidth, ApexOptionsSeries } from "./components/apex-chart";
      L9:  import { ApexOptions } from "apexcharts";

The folder components does not exist bellow ./node_modules/stencil-apexcharts/dist/types.

[mikaelkaron]

I’ll take a look at this today. Thanks for reporting @thccorni !

[mikaelkaron]

Ok. Have you installed the peer dependency apexcharts in your project?

[thccorni]

Yes, I've installed "apexcharts": "3.26.0".

[newtonmunene99]

Any fix for this? I'm running into the same issue

[mikaelkaron]

So I've dug around a bit and found the source of the error (the exported types from the component don't resolve correctly in components.d.ts). That problem is not so hard to fix (basically use the global ApexChart types dirrectly), but that causes another problem, since the tag name is apex-chart stencil will create an interface named ApexChart that collides.

I'm trying to see if there's a typescript solution, but worst case scenario I'll just rename apex-chart to something else.. any good ideas?

[mikaelkaron]

So there's an easier option, qualifying the clashing namespace with globalThis.

Btw, this was actually a combination of two stencil "problems":

• exporting/importing from a file in the same folder breaks components.d.ts imports (alternate fix is putting your include files in /src)
• Clashing generated component class name with globalThis (fix is qualifying the clash. ie: globalThis.ApexChart)

[mikaelkaron]

fixed in v2.3.0