Does Not Build in Ubuntu 24.04.01 LTS (Fixed!)

[Capricorn1]

I believe this is primarily an FYI.

I am running into a build failure on Ubuntu 24.04.01 LTS when the project attempts to pull in and build the canvas project. I believe this is not an issue with the s1panel app. I had the same issue just trying to build canvas 2.11.2 standalone. Others see the same error, as documented in this thread. The issue is that the build is trying to download node-v109, and that version does not exist.

The build output is below.

root@fw2404:/opt/acemagic/s1panel# ./install
Home Directory is /opt/acemagic/s1panel
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm WARN deprecated gauge@3.0.2: This package is no longer supported.
npm ERR! code 1
npm ERR! path /opt/acemagic/s1panel/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/usr/bin/node /usr/share/nodejs/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/opt/acemagic/s1panel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/opt/acemagic/s1panel/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v109' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using node-pre-gyp@1.0.11
npm ERR! node-pre-gyp info using node@18.19.1 | linux | x64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v109-linux-glibc-x64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v109-linux-glibc-x64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.19.1 (node-v109 ABI, glibc) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v109-linux-glibc-x64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.3.0
npm ERR! gyp info using node@18.19.1 | linux | x64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.3.0
npm ERR! gyp info using node@18.19.1 | linux | x64
npm ERR! gyp info find Python using Python version 3.12.3 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/share/nodejs/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   '/opt/acemagic/s1panel/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/share/nodejs/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/include/nodejs/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=/usr/include/nodejs',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/share/nodejs/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/usr/include/nodejs/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/opt/acemagic/s1panel/node_modules/canvas',
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! /bin/sh: 1: pkg-config: not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/usr/share/nodejs/node-gyp/lib/configure.js:329:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:517:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:292:12)
npm ERR! gyp ERR! System Linux 6.8.0-51-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/usr/share/nodejs/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/opt/acemagic/s1panel/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/opt/acemagic/s1panel/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v109"
npm ERR! gyp ERR! cwd /opt/acemagic/s1panel/node_modules/canvas
npm ERR! gyp ERR! node -v v18.19.1
npm ERR! gyp ERR! node-gyp -v v9.3.0
npm ERR! gyp ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/share/nodejs/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/opt/acemagic/s1panel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/opt/acemagic/s1panel/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v109' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/opt/acemagic/s1panel/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:517:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:303:5)
npm ERR! node-pre-gyp ERR! System Linux 6.8.0-51-generic
npm ERR! node-pre-gyp ERR! command "/usr/bin/node" "/opt/acemagic/s1panel/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /opt/acemagic/s1panel/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.19.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2025-01-15T19_13_57_513Z-debug-0.log

up to date, audited 38 packages in 449ms

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

found 0 vulnerabilities
Building GUI

> s1panel-gui@0.0.1 build
> vite build

vite v3.2.11 building for production...
✓ 18 modules transformed.
[vite]: Rollup failed to resolve import "chart.js/auto" from "node_modules/primevue/chart/chart.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "chart.js/auto" from "node_modules/primevue/chart/chart.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///opt/acemagic/s1panel/gui/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:45910:19)
    at onwarn (file:///opt/acemagic/s1panel/gui/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:45681:13)
    at Object.onwarn (file:///opt/acemagic/s1panel/gui/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
    at ModuleLoader.handleResolveId (file:///opt/acemagic/s1panel/gui/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
    at ModuleLoader.resolveDynamicImport (file:///opt/acemagic/s1panel/gui/node_modules/rollup/dist/es/shared/rollup.js:22210:120)
    at async file:///opt/acemagic/s1panel/gui/node_modules/rollup/dist/es/shared/rollup.js:22105:32
Install Service...
Reload Service Daemon...
Enable s1panel...
Start s1panel...
Done!
● s1panel.service - "S1 Panel"
     Loaded: loaded (/etc/systemd/system/s1panel.service; enabled; preset: enabled)
     Active: active (running) since Wed 2025-01-15 14:14:07 EST; 10ms ago
   Main PID: 81015 (node)
      Tasks: 1 (limit: 18839)
     Memory: 1.5M (peak: 1.5M)
        CPU: 8ms
     CGroup: /system.slice/s1panel.service
             └─81015 /usr/bin/node main.js

Jan 15 14:14:07 fw2404 systemd[1]: Started s1panel.service - "S1 Panel".

[nikkaktus24]

Hi! I spent one day trying to make it work.

Ubuntu 24.04.2 LTS. Node version on Sudo env: 18.19.1.

steps:

1. cd gui
2. (user nvm 18.19.1) npm i
3. (user nvm 18.19.1) npm run build -> it can throw issue about rollupOptions, its easy to fix.
4. cd ../
5. (user nvm 18.13.0) npm i
6. sudo npm rebuild
7. sudo node main.js

Also I installed this sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev. Since it use different ways, you can try without this command and if it not works try to use this command first.

Hope it will help you

[Capricorn1]

Thanks so much, @nikkaktus24 !

It's 90% working now, which is much better than the 0% it was working before. I'm getting the error network_thread: network stats read error: undefined from s1panel/sensors/network_thread.js, but that's something I can probably debug even with my limited knowledge of nodejs. Running the command apt-get install build-essential ... was necessary to get the build to work.

The abbreviated version of the steps I followed is:

1. root@fw2404:~# cd /opt/acemagic/
2. root@fw2404:/opt/acemagic# cd s1panel/
3. root@fw2404:/opt/acemagic/s1panel# npm -v (returned 9.2.0)
4. root@fw2404:/opt/acemagic/s1panel# cd gui
5. root@fw2404:/opt/acemagic/s1panel/gui# npm i
   #############################################################
   Failed due to not being able to resolve import "chart.js/auto"
   #############################################################
6. root@fw2404:/opt/acemagic/s1panel/gui# npm install chart.js@latest
7. root@fw2404:/opt/acemagic/s1panel/gui# npm i
8. root@fw2404:/opt/acemagic/s1panel/gui# npm run build
   #############################################################
   Failed due to not being able to find canvas-v2.11.2-node-v109-linux-glibc-x64.tar.gz
   #############################################################
9. root@fw2404:/opt/acemagic/s1panel/gui# apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
10. root@fw2404:/opt/acemagic/s1panel/gui# npm i
11. root@fw2404:/opt/acemagic/s1panel/gui# cd ..
12. root@fw2404:/opt/acemagic/s1panel# npm i
13. root@fw2404:/opt/acemagic/s1panel# npm rebuild
14. root@fw2404:/opt/acemagic/s1panel# node main.js

2025-04-02 14:01:43.4343 [error] network_thread: network stats read error: undefined
2025-04-02 14:01:44.4444 [error] network_thread: restart after read error
2025-04-02 14:01:44.4444 [info] network_thread: collector started for iface enp2s0

root@fw2404:/opt/acemagic/s1panel# find . -type f -print | xargs grep 'network stats read error'
./sensors/network_thread.js: logger.error('network_thread: network stats read error: ' + err);
root@fw2404:/opt/acemagic/s1panel# cd sensors/
root@fw2404:/opt/acemagic/s1panel/sensors# vi network_thread.js

Enable the s1panel service:
root@fw2404:/opt/acemagic/s1panel# systemctl enable s1panel.service
root@fw2404:/opt/acemagic/s1panel# systemctl start s1panel.service
root@fw2404:/opt/acemagic/s1panel# systemctl status s1panel.service
● s1panel.service - "S1 Panel"
Loaded: loaded (/etc/systemd/system/s1panel.service; enabled; preset: enabled)
Active: active (running) since Wed 2025-04-02 14:10:10 EDT; 6s ago
Main PID: 188428 (node)
Tasks: 29 (limit: 18835)
Memory: 125.3M (peak: 135.0M)
CPU: 2.760s
CGroup: /system.slice/s1panel.service
└─188428 /usr/bin/node main.js

I attached a file with a more detailed log of what I did.

steps-based-on-hints-from-nikkaktus24-on-github.txt

[tjaworski]

in the sensors/network_thread.js, change the read_file to:

function read_file(path, retry) {

    return new Promise((fulfill, reject) => {

        fs.readFile(path, 'utf8', (err, data) => {

            if (err) {

                if (!retry) {
                    // retry
                    return setTimeout(() => {

                        read_file(path, true).then(data2 => {

                            fulfill(data2);

                        }, err2 => {

                            reject(path + ': ' + err2);
                        });
        
                    }, 100);
                }
                
                return reject(path + ': ' + err);
            }
            
            fulfill(data);
        });
    });
}

this will give you a better error message, instead of unknown...

[Capricorn1]

in the sensors/network_thread.js, change the read_file to:
. . . snip . . .
this will give you a better error message, instead of unknown...

Thanks for this, @tjaworski . The part of the code above that does a single retry with a delay after a read error fixes the issue, so I can't tell you if the error message is better.

Earlier, I'd put in some logging statements showing that the read error only occurred occasionally. My guess was that when the OS was updating some of the values, there was a tiny amount of time where the file path didn't exist. I wondered if I could put a retry somewhere, and if the error would disappear. I hadn't looked into it to figure out where to put it yet.

[tjaworski]

yeah, I noticed that on my s1 too. that's why I added the retry. I couldn't figure out why node.js can't read the file from time to time. very weird. this change will be in the next push, with a weather sensor/widget.