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'

My JS file looks like this:

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

Folder structure:

tsconfig:

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

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?

2 Answers

Answers 1

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...

1 - Get tsc to compile your chart test

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:

{   "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.

2 - Configuring webpack to work with tsc

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

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

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

---

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

Answers 2

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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati