I am currently working on a project that involves browser-side code written in TypeScript and transpiled to JavaScript using the following tsconfig settings:
{
"compilerOptions": {
"target": "es6",
"sourceMap": true,
"outDir": "../www/",
"rootDirs": ["./", "../src"],
"module": "commonjs",
"moduleResolution": "node",
"skipLibCheck": true,
"allowSyntheticDefaultImports": true
},
"files": [
"client.ts"
],
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/*",
"./node_modules/@types/node/index.d.ts",
]
}
Within the code, I utilize ApexCharts as shown below:
import ApexCharts from 'apexcharts';
[...]
deviceCard.chart = new ApexCharts(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();
However, after transpiling the code with tsc, these lines transform into:
deviceCard.chart = new apexcharts_1.default(document.querySelector(`#${newCard.serial}chart`), options);
deviceCard.chart.render();
As I struggled to import ApexCharts from the node module to the browser, I resorted to downloading ApexCharts from , saving it locally, and bundling everything together with browserify.
Upon running the code in the browser, I encounter this error:
TypeError: apexcharts_1.default is not a constructor
Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!