Cannot install on EC2

[DOEHOONLEE]

Hi~!

I am trying to install node-canvas-webgl on my project and kept bumping into errors then I found out it had something to do with gl.

So when I try npm i gl or npm install headless-gl, I get these messages

npm ERR! Package x11 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `x11.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'x11' found
npm ERR! Package xi was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `xi.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'xi' found
npm ERR! Package xext was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `xext.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'xext' found

Anybody had this problem?

P.S.

I tried this all in node version 12, 14, 16, 18 and all were the same.

[dhritzkiv]

@DOEHOONLEE Can you run uname -a and post the output here?

It may be that you need to install some additional packages (xvfb, mesa) for gl to run in your environment.

[DOEHOONLEE]

@dhritzkiv

I also got an error saying that GLIBC version 2.27 is required, but for some reason, I am not able to update GLIBC on my EC2.

So I setup node-canvas-webgl on docker and I tried again.

I made sure to have GLIBC abvoe 2.27 then ran apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config and got rid of above errors.

An easy way to test would be

• git clone https://github.com/akira-cn/node-canvas-webgl.git on EC2 or docker

• npm i

• node test/threejs.js

I did succeed installing gl here on docker, but when I try to run it (node test/threejs.js), I get an error like this

THREE.WebGLRenderer: Cannot read properties of null (reading 'getUniformLocation')
/usr/src/app/node_modules/three/build/three.js:18302
			throw error;
			^

TypeError: Cannot read properties of null (reading 'getUniformLocation')
    at NodeCanvasElement.getContext (/usr/src/app/lib/canvas.js:88:39)
    at getContext (/usr/src/app/node_modules/three/build/three.js:18248:27)
    at new WebGLRenderer (/usr/src/app/node_modules/three/build/three.js:18279:11)
    at Object.<anonymous> (/usr/src/app/test/threejs.js:14:18)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:22:47

[1] I don't think this is the right place to ask, but on EC2, when I run yum install glibc, build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config, it says they are all up-to-date :(

[2] on Docker, I am able to install all the necessary packages, but unable to run it using gl

[dhritzkiv]

In the Docker image, are you starting a xvfb screen buffer?

Usually, it involves running something like

Xvfb :99 -screen 0 1024x768x24 </dev/null &

export DISPLAY=":99"

node test/threejs.js

Or

xvfb-run -s "-ac -screen 0 1024x768x24" node test/threejs.js

Make sure there is enough graphics memory available to the docker container.

[DOEHOONLEE]

I only tried this on EC2, but not on Docker. Let me try that! Thank you!!

[edit]

oh, wait.. I did have that in Docker.

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN apt-get update -y \
  && apt install xvfb \
  && apt-get install firefox \
  && apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config \
  && rm -rf node_modules \
  && ls \
  && node -v

RUN npm install

COPY . .

RUN xvfb-run -s "-ac -screen 0 1280x1024x24" test/threejs.js

This is what my Dockerfile looks like, but I need extra memory like you mentioned. Let me check it and come back! Thank you!!

[DOEHOONLEE]

I found a typo at apt install, but still fails after fixing it :(

0 upgraded, 42 newly installed, 0 to remove and 17 not upgraded.
Need to get 34.6 MB of archives.
After this operation, 238 MB of additional disk space will be used.
Do you want to continue? [Y/n] Abort.
The command '/bin/sh -c apt-get update -y && apt-get install xvfb && apt-get install firefox && apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config && rm -rf node_modules && ls && node -v' returned a non-zero code: 1

[dhritzkiv]

RUN xvfb-run -s "-ac -screen 0 1280x1024x24" test/threejs.js

should be

RUN xvfb-run -s "-ac -screen 0 1280x1024x24" node test/threejs.js, no?

[DOEHOONLEE]

Hmm.. still getting the same error after fixing to node test/threejs.js

[dhritzkiv]

The error being THREE.WebGLRenderer: Cannot read properties of null (reading 'getUniformLocation') ?

[dhritzkiv]

I think I would need to see your context creation/access code. Find exactly where in your code the gl context is returning null

[DOEHOONLEE]

What I did was

[1] git clone https://github.com/akira-cn/node-canvas-webgl.git

[2] go into the folder

[3] create Dockerfile

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN apt-get update -y \
  && apt-get install xvfb \
  && apt-get install firefox \
  && apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config \
  && rm -rf node_modules \
  && ls \
  && node -v

RUN npm install

COPY . .

RUN xvfb-run -s "-ac -screen 0 1280x1024x24" node test/threejs.js

[4] docker build . -t Dockerfile

Could something be wrong here? :(

[DOEHOONLEE]

@DOEHOONLEE Can you run uname -a and post the output here?
It may be that you need to install some additional packages (xvfb, mesa) for gl to run in your environment.

I just checked if xvfb and mesa-libGL are installed and they are. Are there anything else I should look for?

[DOEHOONLEE]

@dhritzkiv I got it to work with your solution above

Xvfb :99 -screen 0 1024x768x24 </dev/null &

export DISPLAY=":99"

node test/threejs.js

is there a way to run npm run start command with Xvfb?

[dhritzkiv]

You may be able to achieve it with xvfb-run, if it's included on your system:

xvfb-run --auto-servernum --server-num=1 -s "-ac -screen 0 1280x1024x24" node test/three.js

Otherwise, you may have to:

• create a shell script that starts Xvfb, sets the DISPLAY env variable, and runs the node program. Include that shell script in the npm script; or,
• always have Xvfb running before running your node program

[DOEHOONLEE]

@dhritzkiv Sorry for the late reply!
xvfb-run command solved all the problem!! Thank you so much!! :D

[DOEHOONLEE]

@dhritzkiv , just one last question. Does GLIBC version actually matter?
With different node version, I sometimes get this GLIBC_2.27 not found error message.

[dhritzkiv]

I don't believe this is a requirement within headless-gl, but node. The precise version is likely unimportant, but I believe GLIBC_2.27 is likely the minimum required by native build tools with node.

Other, similar issues experienced by others:

nvm-sh/nvm#2972
microsoft/vscode#168427

It's possible your distribution (and/or build tools/libraries) are out of date. It might be easier to control and ensure your build environment with docker or chroot