Docker build fails: `canvas` native compile error and Vite `yarn build` JavaScript heap OOM on `node:20-slim`
Environment
- Command:
docker compose up --build/docker build - Base image:
node:20-slim(Dockerfilefrontend-builderstage) - Dependency:
package.jsonincludes"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:
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 memoryThis 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:
ARG NODE_HEAP_MB=8192
ENV NODE_OPTIONS=--max-old-space-size=${NODE_HEAP_MB}
RUN yarn buildOptional in docker-compose.yml:
build:
args:
NODE_HEAP_MB: "8192"Steps to reproduce
- Clone the repo and configure
.env - Run
docker compose up --build - Build fails at
yarn install(canvas) and/oryarn build(Vite OOM)
Expected behavior
docker compose up --build completes successfully and the service starts on port 5567.`
Source: microsoft/data-formulator