Cannot find module 'chart.js'

Question

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" );

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?

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

---

UPDATE 1

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.

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.

---

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