Cannot install on Ubuntu 22.04 due to broken libANGLE

[matpen]

I am trying to install [email protected] on Ubuntu 22.04, which depends on gl@^4.4.0. The build fails due to the problem reported in stackgl/headless-gl#214 (comment). This seems to affect Debian 11, too (see stackgl/headless-gl#221), and possibly other platforms.

Installing [email protected] directly succeeds, so it seems that the solution may just be to upgrade the dependencies of node-canvas-webgl.

Full error log

root@e7d83ffb3de0:/tmp/canvas# uname -a
Linux e7d83ffb3de0 5.4.0-109-generic #123~18.04.1-Ubuntu SMP Fri Apr 8 09:48:52 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
root@e7d83ffb3de0:/tmp/canvas# node --version
v16.14.2
root@e7d83ffb3de0:/tmp/canvas# npm --version
8.5.0
root@e7d83ffb3de0:/tmp/canvas# npm i [email protected]
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path /tmp/canvas/node_modules/gl
npm ERR! command failed
npm ERR! command sh -c prebuild-install || node-gyp rebuild
npm ERR! make: Entering directory '/tmp/canvas/node_modules/gl/build'
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/Float16ToFloat32.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/MemoryBuffer.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/angleutils.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/debug.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/mathutil.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/string_utils.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/tls.o
npm ERR!   CXX(target) Release/obj.target/angle_common/angle/src/common/utilities.o
npm ERR!   AR(target) Release/obj.target/angle/src/angle_common.a
npm ERR!   COPY Release/angle_common.a
npm ERR!   COPY Release/obj/gen/angle/id/commit.h
npm ERR!   TOUCH Release/obj.target/angle/src/commit_id.stamp
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/common/event_tracer.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/AttributeMap.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Buffer.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Caps.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Compiler.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Config.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Context.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Data.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Debug.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Device.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Display.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Error.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Fence.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/Framebuffer.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/FramebufferAttachment.o
npm ERR!   CXX(target) Release/obj.target/libANGLE/angle/src/libANGLE/HandleAllocator.o
npm ERR! make: Leaving directory '/tmp/canvas/node_modules/gl/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp info find Python using Python version 3.10.4 found at "/usr/bin/python3"
npm ERR! (node:151) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/tmp/canvas/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/tmp/canvas/node_modules/gl/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/tmp/canvas/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/root/.cache/node-gyp/16.14.2/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/root/.cache/node-gyp/16.14.2',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/tmp/canvas/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/root/.cache/node-gyp/16.14.2/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/tmp/canvas/node_modules/gl',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp: In constructor 'gl::HandleAllocator::HandleAllocator()':
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:52: error: 'numeric_limits' is not a member of 'std'
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                                    ^~~~~~~~~~~~~~
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:76: error: '::max' has not been declared; did you mean 'std::max'?
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                                                            ^~~
npm ERR!       |                                                                            std::max
npm ERR! In file included from /usr/include/c++/11/algorithm:62,
npm ERR!                  from ../angle/src/libANGLE/HandleAllocator.cpp:12:
npm ERR! /usr/include/c++/11/bits/stl_algo.h:3467:5: note: 'std::max' declared here
npm ERR!  3467 |     max(initializer_list<_Tp> __l, _Compare __comp)
npm ERR!       |     ^~~
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:43: error: expected primary-expression before '(' token
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                           ^
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:52: error: 'numeric_limits' is not a member of 'std'
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                                    ^~~~~~~~~~~~~~
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:73: error: expected primary-expression before '>' token
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                                                         ^
npm ERR! ../angle/src/libANGLE/HandleAllocator.cpp:29:76: error: '::max' has not been declared; did you mean 'std::max'?
npm ERR!    29 |     mUnallocatedList.push_back(HandleRange(1, std::numeric_limits<GLuint>::max()));
npm ERR!       |                                                                            ^~~
npm ERR!       |                                                                            std::max
npm ERR! In file included from /usr/include/c++/11/algorithm:62,
npm ERR!                  from ../angle/src/libANGLE/HandleAllocator.cpp:12:
npm ERR! /usr/include/c++/11/bits/stl_algo.h:3467:5: note: 'std::max' declared here
npm ERR!  3467 |     max(initializer_list<_Tp> __l, _Compare __comp)
npm ERR!       |     ^~~
npm ERR! make: *** [angle/src/libANGLE.target.mk:241: Release/obj.target/libANGLE/angle/src/libANGLE/HandleAllocator.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/tmp/canvas/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Linux 5.4.0-109-generic
npm ERR! gyp ERR! command "/usr/local/lib/nodejs/node-v16.14.2-linux-x64/bin/node" "/tmp/canvas/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /tmp/canvas/node_modules/gl
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-05-04T07_17_19_083Z-debug-0.log
root@e7d83ffb3de0:/tmp/canvas# npm i [email protected]

added 145 packages, and audited 146 packages in 7s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[DOEHOONLEE]

Interesting that you could install gl directly.. I kept failing at it.

I solved my problem with apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config. See if that works..?

By the way, can you describe your environment more specifically? Is this on docker? ec2?

[matpen]

Thank you, @DOEHOONLEE for your reply.

Interesting that you could install gl directly.. I kept failing at it.
I solved my problem with apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config. See if that works..?

What you describe are the dependencies of gl, and those must be of course be installed with apt before attempting to use npm install. These are listed in the install instructions.

However, because node-canvas-webgl depends also on canvas, you need to install the dependencies of it, as well: see install instructions.

The full install command is:
apt-get install build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

I had already followed the correct install sequence before writing the OP, so your suggestion unfortunately does not solve the problem.

By the way, can you describe your environment more specifically? Is this on docker? ec2?

I am testing in a docker container, to make sure that the system is clean
docker run --rm -it docker.io/library/ubuntu:22.04 bash

[DOEHOONLEE]

Hmm.. I did succeed with npm install, but it keeps failing when I run node test/three.js command throwing THREE.WebGLRenderer: Cannot read property 'getUniformLocation' of null error.

[masonbrothers]

Hmm.. I did succeed with npm install, but it keeps failing when I run node test/three.js command throwing THREE.WebGLRenderer: Cannot read property 'getUniformLocation' of null error.

For people looking for a solution to the THREE.WebGLRenderer: Cannot read property 'getUniformLocation' of null problem in the future, check out stackgl/headless-gl#241 (comment)

Thanks DOEHOONLEE and dhritzkiv for solving this!