Docker build fails: `canvas` native compile error and Vite `yarn build` JavaScript heap OOM on `node:20-slim`

Author: asynchatCreated Jun 26, 2026Updated Jun 28, 2026

Environment

  • Command: docker compose up --build / docker build
  • Base image: node:20-slim (Dockerfile frontend-builder stage)
  • Dependency: package.json includes "canvas": "^3.2.1"

Problem 1: canvas fails to compile during yarn install

Symptoms

gyp ERR! cwd /app/node_modules/canvas
gyp ERR! not ok
error Command failed with exit code 1.

Root cause

node:20-slim does not include the native build toolchain or Cairo development libraries required by the canvas npm package. Running yarn install triggers node-gyp rebuild, which fails on the slim image.

Proposed fix

Install system dependencies in the frontend-builder stage before yarn install:

dockerfile
RUN apt-get update && apt-get install -y --no-install-recommends \
        python3 make g++ pkg-config \
        libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev librsvg2-dev \
    && rm -rf /var/lib/apt/lists/*

Problem 2: JavaScript heap OOM during yarn build

Symptoms

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

This occurs even when Docker Desktop memory is set to 12 GB or higher.

Root cause

Node.js defaults to a heap limit of roughly 2 GB, independent of the total memory allocated to Docker. Vite production builds for this project can exceed that limit.

Proposed fix

Raise the Node.js heap limit before yarn build, with an optional build-arg override:

dockerfile
ARG NODE_HEAP_MB=8192
ENV NODE_OPTIONS=--max-old-space-size=${NODE_HEAP_MB}
RUN yarn build

Optional in docker-compose.yml:

yaml
build:
  args:
    NODE_HEAP_MB: "8192"

Steps to reproduce

  1. Clone the repo and configure .env
  2. Run docker compose up --build
  3. Build fails at yarn install (canvas) and/or yarn build (Vite OOM)

Expected behavior

docker compose up --build completes successfully and the service starts on port 5567.`

Source: microsoft/data-formulator