[Vercel] Error creating chart image – Error: Cannot find module 'canvas'

[GMaiolo]

Hello, I assume this is an error related to node-canvas but I'm not able to fix it with my NextJS application. Everything works locally but when deploying to Vercel, the function starts to fail.

Full error log:

ERROR   Error creating chart image Error: Cannot find module 'canvas'
Require stack:
- /var/task/node_modules/chartjs-node-canvas/dist/freshRequire.js
- /var/task/node_modules/chartjs-node-canvas/dist/index.js
- /var/task/.next/serverless/pages/articulos/[id].js
- /var/task/now__launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.freshRequire (/var/task/node_modules/chartjs-node-canvas/dist/freshRequire.js:5:34)
    at new CanvasRenderService (/var/task/node_modules/chartjs-node-canvas/dist/index.js:19:39)
    at createChartImage (/var/task/.next/serverless/pages/articulos/[id].js:1874:33)
    at getServerSideProps (/var/task/.next/serverless/pages/articulos/[id].js:1957:37)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async renderToHTML (/var/task/node_modules/next/dist/next-server/server/render.js:39:215)
    at async renderReqToHTML (/var/task/.next/serverless/pages/articulos/[id].js:1136:22)
    at async render (/var/task/.next/serverless/pages/articulos/[id].js:1253:22) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/chartjs-node-canvas/dist/freshRequire.js',
    '/var/task/node_modules/chartjs-node-canvas/dist/index.js',
    '/var/task/.next/serverless/pages/articulos/[id].js',
    '/var/task/now__launcher.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}

As far as I'm aware of, Vercel uses Amazon Linux 2 and I got the packages to install from node-canvas wiki for Fedora. Therefore I updated the install command for my project to run:

yum install gcc-c++ cairo-devel libjpeg-turbo-devel pango-devel giflib-devel && npm install

It looks like it installs everything correctly but the same error persists. Any clue on how to get it working correctly?

[SeanSobey]

Hmm I am afraid I cannot be of much use with this issue, having experience installing only on windows and linux.

Have a look at the npm install logs, this might give a clue. Try npm ci and also make sure you are using a supported version of node, I have had the most consistent success with 12.14.1.

[casedrene]

@GMaiolo were you able to get it to work?

[GMaiolo]

@casedrene sadly no, I just wanted a quick image of the chart to put in the meta information of a NextJS app, but spent too much time into this and eventually desisted. If you ever find a fix I'd love to know!

[karintou8710]

Hello, I got the same error when deploying a serverless function in vercel, but I found a workaround.

• If there was no require('canvas'), canvas would not be installed in /var/task/node_modules. (Not sure why).

  const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
  const canvas = require('canvas'); // important

• package.json

  "scripts": {
    "vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/"
  },

• use canvas@2.6.1 & register font.

This works for me.

The following repository is a sample. https://github.com/karintou8710/vercel-chartjs-node-canvas

[SeanSobey]

Hmm, wonder if that is some kind of tree-shaking thing? weird. Thanks for posting your fix!

[SawkaDev]

@karintou8710 have you found any way around adding this line const canvas = require('canvas'); // important

I am finding that if I add it I am getting this error when deploying to vercel

The Serverless Function "api/patient/createPDFAndCharts/[...index]" is 50.78mb which exceeds the maximum size limit of 50mb.

Upon looking at the large depdenecies genertaed at build time its clear that chartjs-node-canvas is taking up 42.81mb

Large Dependencies                  Uncompressed size  Compressed size
node_modules/canvas/build                   163.99 MB         42.81 MB

Any suggestions or alternatives you have found?