Apexcharts.js: Compilation error TS1122 in apexcharts.d.ts

[Vvelghe]

Issue

I can't import apexcharts on my angular 5.2 project

Explanation

After doing
npm install apexcharts --save

When i tried to import the module
import {ApexCharts} from 'apexcharts'

I've got an error :

TS2305: Module '"apexcharts"' has no exported member 'ApexCharts'.

So i tried to import all the module
import * as ApexCharts from 'apexcharts'

But now, i've another error because the apexcharts.d.ts contains an error, it is not compiling.

ERROR in node_modules/apexcharts/apexcharts.d.ts(526,16): error TS1122: A tuple type element list cannot be empty.

[sugihartolim]

I'm running into the same problem with Angular 7.
import ApexCharts from 'apexcharts'
will show
[ts] Module '"apexcharts"' has no default export. [1192]

[sugihartolim]

https://github.com/Microsoft/TypeScript/issues/22321

Need to set typescript compiler options as follows:
"esModuleInterop": true, "allowSyntheticDefaultImports": true, "module": "commonjs", "target": "es5",

So, straight out of the box, angular-cli generated app would not work with apexcharts at the moment.

[sugihartolim]

import * as ApexCharts from 'apexcharts';
should work if the typings don't have any compilation errors.

Just tried this, no compilation errors, but this error message showed up on the console:

ERROR TypeError: apexcharts__WEBPACK_IMPORTED_MODULE_2__ is not a constructor at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngAfterViewInit

The offending line is

const chart = new ApexCharts(document.querySelector('#chart'), this.options);

[sugihartolim]

https://webpack.js.org/guides/author-libraries/#expose-the-library

I wonder if this is the problem...

[fmoutawe]

I use Angular 7 and I do this thing :

// @ts-ignore
import ApexCharts from 'apexcharts';

It'a a bit tricky but compiler let me in.

[sugihartolim]

Thank you @ivelfan & @junedchhipa , that's the final piece that finally made it work.
As of angular 7 and apexcharts 3.2.2, to recap just in case anyone else needs it:
(Note that 'module: es2015' WILL NOT work)

tsconfig.json:
"compilerOptions" : {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}

// @ts-ignore
'import ApexCharts from 'apexcharts'; '

This is a temporary workaround until the export situation got resolved, i guess.

[junedchhipa]

@sugihartolim
ApexCharts is also exported as commonjs in the dist directory.

Can you please try

import ApexCharts from 'apexcharts/dist/apexcharts.common.js'

[sugihartolim]

That one didn't work. It compiles just fine, but vscode gives the following warning on the import:

Could not find a declaration file for module 'apexcharts/dist/apexcharts.common.js'. '[redacted]/node_modules/apexcharts/dist/apexcharts.common.js' implicitly has an 'any' type. Try npm install @types/apexcharts if it exists or add a new declaration (.d.ts) file containing declare module 'apexcharts/dist/apexcharts.common.js';ts(7016)

The console shows this error message, and the charts didn't show up:

ng:///AppModule/HomeComponent_Host.ngfactory.js:5 ERROR TypeError: apexcharts_common_js_1.default is not a constructor

[junedchhipa]

An angular wrapper for ApexCharts has just released 3 days ago - https://github.com/morrisjdev/ng-apexcharts

Maybe, that brings an end to all the import issues?

[osnoser1]

Hello, add to angular.json: "node_modules/apexcharts/dist/apexcharts.min.js" and import into the component this way: import 'apexcharts';

[sugihartolim]

@osnoser1 Thank you for the additional solution. It works fine out of the box with angular 7 cli.

@junedchhipa The angular wrapper doesn't work when i tried it this week. Didn't have time to dig around yet. Maybe we shouldn't recommend the thing on the front page until the kinks are worked out first? Thanks.

[DiegoVeronezi]

Thanks @sugihartolim. I reply to this config and works for me.

tsconfig.json:

"compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "es2015"
  }

• 'module: es2015' It's working!

[lixaotec]

@DiegoVeronezi can you share your package.json?
I´ve been struggling to get it compiled with aot,

ERROR in ./node_modules/ng-apexcharts/fesm5/ng-apexcharts.js
Module build failed: Error: Debug Failure. False expression.

"apexcharts": "~3.11.2",
"ng-apexcharts": "~1.2.1",

[mwassAndroid]

@DiegoVeronezi can you share your package.json?
I´ve been struggling to get it compiled with aot,

ERROR in ./node_modules/ng-apexcharts/fesm5/ng-apexcharts.js
Module build failed: Error: Debug Failure. False expression.

"apexcharts": "~3.11.2",
"ng-apexcharts": "~1.2.1",

@DiegoVeronezi did you manage to build for production, am also getting the same error though it runs with ng serve

[apsonshrestha]

this worked for me:
adding "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"] on angular.json as below

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"styles": [
"src/styles.scss"
],
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]
},
"configurations": {
...
}
},
"serve": {
...
},
"extract-i18n": {
...
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
...
"styles": [
"src/styles.scss"
],
"scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
}
},
"lint": {
...
},
"e2e": {
...
}
}