[Chartjs]-Cannot find module 'chart.js'

by

1đź‘Ť

âś…

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.

7đź‘Ť

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.

4đź‘Ť

I had the same issue and my problem was that I run:

npm install chart.js --save

in a different file (not the one with the ionic project).
This might be useful for other people having the same issue.

2đź‘Ť

For me, this error came because of a missed dependency @types/chart.js.
If this is the case for you too, add the dependency by running either:

npm i -D @types/chart.js

or

yarn add -D @types/chart.js

This solved the error for me!

-2đź‘Ť

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

Just do this in your javascript file

import Chart from 'chart.js'

Leave a comment