Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

6reactions

karintou8710commented, Aug 16, 2021

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

0reactions

SeanSobeycommented, Oct 13, 2021

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

Top Results From Across the Web

Error: Cannot find module 'canvas' - Chart.js - Stack Overflow

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

Curve fitting for charts: better visualizations for Vercel Analytics

It is difficult to find trends in a graph with a lot of noise. ... The smaller the error is, the better the...

cannot find module 'elasticsearch' from 'setup-jest.js' - You.com

How do I resolve "Cannot find module" error using Node.js? ... Hi, I am creating a project with AJS2, Typescript and SystemJS currently....

How to fix error TS7016: Could not find a declaration file for ...

Try `npm install @types/XYZ` if it exists or add a new declaration (.d. · declare module 'XYZ';. Lastly, you also need to add...

[Solved]-I can't reference an image in Next.js-Reactjs

npm install --save next-images. or. yarn add next-images. Step 2 // Create next.config.js const withImages = require('next-images') module.exports ...