Automattic / Automattic/node-canvas

Symbol lookup error on linux

Open
#2,015 10 comments 4 reactions 0 assignees View on GitHub
Binaries
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue or Feature

Whenever I try to create a canvas my app crashes with the following message:
`node: symbol lookup error: /app/node_modules/canvas/build/Release/canvas.node: undefined symbol: pango_fc_font_map_set_default_substitute`
There is no error stack associated with this crash, this is all the info I get from it.

## Steps to Reproduce

This is a TS code sample but it should be easily convertible to JS. It also requires an image of size 800x200 on a folder called assets with the name `joinBackground.png`. I, unfortunately, cannot debug this issue further than this function as I don't have access to a Linux machine and this only happens on the server where I host my app.

```ts
import { createCanvas, loadImage } from "canvas"

function makeImage() {
// Define assets and create canvas
const canvas = createCanvas(800, 200),
ctx = canvas.getContext("2d"),
userName = "Test username"

const bg = await loadImage("assets/joinBackground.png")
let nameWidth: number

// GENERAL
// Add background and set basic styling
ctx.drawImage(bg, 0, 0, 800, 200)
ctx.fillStyle = "white"

// TEXT
// Measure text widths
ctx.font = "37.5px Arial, sans-serif"
const welcome = ctx.measureText("Welcome ")
ctx.font = "37.5px sans, Arial, sans-serif"
const name = ctx.measureText(userName)
if (name.width > 550 - welcome.width) nameWidth = 550 - welcome.width
else nameWidth = name.width

// Draw 'Welcome ' and '!'
ctx.font = "37.5px Arial, sans-serif"
ctx.fillText("Welcome ", 200, 92.5)
ctx.fillText("!", 200 + welcome.width + nameWidth, 92.5)

// Draw username
ctx.font = "37.5px sans, Arial, sans-serif"
ctx.fillText(userName, 200 + welcome.width, 92.5, 550 - welcome.width)

// Draw member count
ctx.font = "30px Bitter, Arial, sans-serif"
ctx.fillText(`You're member #239`, 200, 132.5)

// ICON
// Draw a circle for the image to go into
ctx.beginPath()
ctx.arc(100, 100, 75, 0, 2 * Math.PI)
ctx.closePath()

// Put the image in the circle
const userPic = await loadImage("https://cdn.discordapp.com/avatars/240875059953139714/1208d711840f42cd7041e675abeb44ae.png")
ctx.clip()
ctx.drawImage(userPic, 25, 25, 150, 150)
ctx.restore()
}
```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): 2.9.1 (didn't happen in 2.9.0)
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v16.14.2 on Ubuntu 20.04.4 LTS

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.