GLIBC version errors after upgrading to Node 20 on Vercel, NEXTJS 12

Help
1

Summary

Since Node 16 was discontinued on Vercel, we upgraded our web app to Node 20. However, we encountered the following build error:

Error: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by /vercel/path0/node_modules/canvas/build/Release/libglib-2.0.so.0)
    at Module._extensions..node (node:internal/modules/cjs/loader:1460:18)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/vercel/path0/node_modules/canvas/lib/bindings.js:3:18)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12) {
  code: 'ERR_DLOPEN_FAILED'
}
> Build error occurred
Error: Failed to collect page data for /[page]
    at /vercel/path0/node_modules/next/dist/build/utils.js:916:15 {
  type: 'Error'
}

To resolve this, we followed an online discussion and installed “canvas”: “^3.0.0-rc3”. This allowed the build to succeed.

However, we are now facing a runtime error, and the entire app appears as a black screen. The logs show:

node: /var/task/node_modules/canvas/build/Release/libstdc++.so.6: version `GLIBCXX_3.4.29' not found (required by node)
node: /var/task/node_modules/canvas/build/Release/libstdc++.so.6: version `GLIBCXX_3.4.26' not found (required by node)
Node.js process exited with exit status: 1. The logs above can help with debugging the issue

App Details:
Framework: Next.js 12
Libraries Used: Fabric.js, react-sketch-canvas, Konva.js

Observations & Questions:
Build works fine on local with same node version (20) and Based on our investigation, this issue seems to be caused by react-sketch-canvas, which depends on canvas.
Our main concern is: Why is this being built or imported on the server side?
We have explicitly marked the files importing react-sketch-canvas with “use client” and dynamically importing the lib, yet the issue persists, it was working fine on node 16 version.
Any insights on how to resolve this issue would be greatly appreciated!

2

Hi, @cloud-appyhighcom! Welcome to the Vercel Community :wave:

We appreciate your patience with this :pray:

Did you manage to find a root cause of this issue? Or are you still seeing it? It’d be helpful to get a minimal reproducible example for us to share internally.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.