[RC0] How to import "c3" (c3js chart)

After the RC0 upgrade, the c3 import do not work anymore

code :

npm install @types/c3  --save-dev --save-exact
npm install c3  --save

import * as c3  from 'c3';
@Injectable()
export class Service {
  constructor() {
    console.log(c3)
  }
}

TypeScript error :

[14:37:52] src/service/service.ts(6,22): error TS2306: File '...MYPROJECT/node_modules/@types/c3/index.d.ts' is not a module.

c3/index.d.ts :

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/c3/index.d.ts

How can I import this npm dependency?

2 Likes

I’m having the same problem :sweat:

Hi,
I faced the same problem and found a (hacky) solution, waiting for an update of C3 typings:

Just add

declare module ‘c3’ {
export = c3;
}

at the beginning of [node_modules/@types/c3/index.d.ts] file…
And you can compile without error!

1 Like

Try importing just the default import with something like import c3 from 'c3' instead of the wildcard *.

@rapropos: changing import * as c3… to import c3 is necessary, but not enough to ionic build.
You have to add:

declare module ‘c3’ {
export = c3;
}

at the beginning of [node_modules/@types/c3/index.d.ts] file…

1 Like

Hi guys , i added

declare module ‘c3’ {
export = c3;
}

and used

import c3 from ‘c3’;

but keep getting the error :sweat:

Uncaught TypeError: Cannot read property ‘document’ of undefined
in d3.js:8

Hi , i solved it by adding

useStrict: false,

to rollup.config.js :smiley:

1 Like

I confirm that both

declare module 'c3' {
export = c3;
}

_(at the end of the node_modules/@types/c3/index.d.ts for me)

and

useStrict: false,

_(in node_modules/@ionic/app-scripts/config/rollup.config.js)

fixed my problem too.
As it depends on the different ionic / types / c3 versions here is my conf if it can help :

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 7 SP1
Node Version: v5.6.0 

package.json :

"d3": "4.2.6" 
"c3": "0.4.11",
"@types/c3": "0.0.35"