How to use the default import from a cdn file? | Smarter Dev | Page 1

#

I'm converting use of one our dependencies from bundled to 'get this from cdn'.

Working bundled code:

import ApexCharts from 'apexcharts';
let chart = new ApexCharts(....);
chart.render();

I'm refactoring that to try and load apexcharts from their CDN by using a dynamic import:

let ApexCharts = await import ('https://cdn.jsdelivr.net/npm/apexcharts')

That 'works' in the sense that I can tell via the console that it's loading the module, but I'm not sure how I can use it like I was before. Here's some console output that may help show what's happening:

> let ApexCharts = await import ('https://cdn.jsdelivr.net/npm/apexcharts')
< undefined
> ApexCharts
< Module {Symbol(Symbol.toStringTag): 'Module'}
> ApexCharts.default
< undefined
> ApexCharts.default()
< VM795:1 Uncaught TypeError: ApexCharts.default is not a function
    at <anonymous>:1:19
(anonymous) @ VM795:1
> new ApexCharts.default()
< VM817:1 Uncaught TypeError: ApexCharts.default is not a constructor
    at <anonymous>:1:1
(anonymous) @ VM817:1

So it loads (confirmed in network tab), but I don't know how to actually use it like I was before.

#

let ApexCharts = (await import('https://cdn.jsdelivr.net/npm/apexcharts')).default;

Above also doesn't work to be clear (which is covered in the console output as well)

#

Ok, I 'solved' this - I need to do the below:

let ApexCharts = await import ('https://cdn.jsdelivr.net/npm/apexcharts')

// Use window.ApexCharts to actually use it.

#

Not sure why though, I guess the CDN version is built different

#How to use the default import from a cdn file?