Error: Cannot find module 'canvas' - Chart.js-CodePudding

I'm using chartjs-node-canvas with chartjs to render a graph config as an image, so after installing it I tried the following :

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
const chartCallback = (ChartJS) => {
  ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
};
const canvasRenderService = new ChartJSNodeCanvas({
  width,
  height,
  chartCallback,
});

But I get the following error when I'm creating a new ChartJSNodeCanvas :

Error: Cannot find module 'canvas'
at Function.webpackEmptyContext [as resolve] (http://localhost:4200/main.js:131373:10)
at freshRequire (http://localhost:4200/main.js:21530:69)
at new ChartJSNodeCanvas (http://localhost:4200/main.js:21592:50)
at ChartImageService._callee2$ (http://localhost:4200/main.js:127066:39)
at tryCatch (http://localhost:4200/main.js:115133:17)
at Generator.invoke [as _invoke] (http://localhost:4200/main.js:115347:22)
at Generator.next (http://localhost:4200/main.js:115185:21)
at http://localhost:4200/main.js:127002:67
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:7278:21)
at __awaiter (http://localhost:4200/main.js:126981:10) {code: 'MODULE_NOT_FOUND', stack: 'Error: Cannot find module 'canvas'
at Fun…ter (http://localhost:4200/main.js:126981:10)', message: 'Cannot find module 'canvas''}

I tried to npm install again, npm rebuild, delete package-lock.json... but it doesn't work. Any ideas ?

I'm using Angular with Electronjs

CodePudding user response：

On https://www.npmjs.com/package/chartjs-node-canvas, there's the following note:

Node JS version

This is limited by the upstream dependency canvas.

Therefore, your problem should be solved if you run the following commands:

npm install canvas
npm rebuild

CodePudding user response：

open New terminal and write npm command to install module which is chartjs-node-canvas

npm install canvas 
npm install chartjs-node-canvas