Cannot find module 'chart.js'

I have a webapp thats running webpack, typescript and gulp. I want to use chart.js library and I have installed the chart.js npm package. I tried to define chart.js on one of the JS files and I am getting this: error TS2307: Cannot find module 'chart.js'

error TS2307: Cannot find module 'chart.js'

My JS file looks like this:

import Chart = require( "chart.js" );


tsconfig:

{
"compilerOptions": {
"module": "commonjs"
},
"files": [
"typings/tsd.d.ts"
]
}


IMPORTANT:
Noticed that chart.js definitions file doesnt have a proper module declaration. The left is accounting JS library which clearly defines the module and it works. Im guessing this is the issue. How do I use the declared variable or import it into another JS file?

chart

import Chart = require("chart");

d.ts

require('chart')

import Chart = require( "./chart" );

3 Answers
3

With the way the typings were defined for chartjs, you don't need to import it. It is in the global space, so you can just use it like this:

let myChart = new Chart(new CanvasRenderingContext2D());


Of course, you still need to add a reference to chartjs in your page, so that it is available globally.

I believe there is two issues in your setup, the error you're getting is just the first one, after solving that you will need to setup webpack to recognize your dependencies from TypeScript source code.

Considering you have the module and its typings properly installed...

First, in your tsconfig.json you should omit the "files" directive so the compiler reads all relevant files automatically(including the typings). Then just add an entry on "exclude" for each folder that doesn't need to be compiled (e.g "node_modules"). So your tsconfig.json should look something like this:

tsconfig.json

{
"compilerOptions": {
"target": "es5"
},
"exclude": [
"node_modules"
]
}


As @vintem posted in the answer below, you don't need to require() chart.js as a module, its a package initially designed to be consumed from the browser in the old fashioned way, so it will automatically come into the global scope once the lib is loaded.

require()

Create a configuration file for your webpack build in the project root named webpack.config.js with something like this as content:

webpack.config.js

module.exports = {
entry: './app.ts',
output: {
filename: 'bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /.tsx?$/, loader: 'ts-loader' }
]
}
}


This makes webpack understand dependencies used in your TypeScript code using ts-loader, you can install it with:

npm install ts-loader --save-dev

npm install ts-loader --save-dev

If your prefer, you can make those configurations directly in your gulp file.

When you use from global scope, well... you just use it, like in the @vintem's answer below. However you need to remove your attempt of writing the definition by yourself and just make sure a /// ref to the downloaded chart definitions is on the file typings/tsd.d.ts, otherwise you're overwriting/mixing those definitions and making a big mess... tsc you automatically look typings folder and find everything for you.

/// ref

typings/tsd.d.ts

tsc

If you're receiving an error like "cannot find Chart module" it probably means you're still trying to import that module somewhere in your code. You need to try to use it directly with new Chart(...) and maybe receive an error like "cannot find Chart class", but then is a whole different history.

new Chart(...)

Good luck and please give a try in the above procedures and tell me if you have any progress.

node_modules

tsconfig.json

So after you do the npm install chart.js --save

npm install chart.js --save

Just do this in your javascript file

import Chart from 'chart.js'


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.