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

[FarhanAtAppyHigh]

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", yet the issue persists, it was working fine on node 16 version.
Any insights on how to resolve this issue would be greatly appreciated!

Additional information

No response

Example

No response

[icyJoseph]

We have explicitly marked the files importing react-sketch-canvas with "use client", yet the issue persists, it was working fine on node 16 version.

use client modules, are still SSR'd, in the default behaviour anyway. Server Components are the new thing, which only runs server side.

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

I guess, you could try to lazy load react-sketch-canvas?

[FarhanAtAppyHigh]

Hi @icyJoseph, thank you for your response.

We are already dynamically importing the library but still facing the issue.

The build is created successfully, but when we load the web app, we get a blank page with broken links. The page request responds with a 500 error, and when we check the runtime logs, we see that a GLib error is occurring on the Next.js server-side request.

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

attaching network log for ur ref:

[icyJoseph]

Uff, that's really annoying ~ I think you might have to contact Vercel support. One can speculate that the issue is within their Linux host OS,