Self-Host Vercel Error

[candideu]

Describe the bug

When attempting to self-host on Vercel + Supabase, I get the following error:

npm ERR! code 1
npm ERR! path /vercel/path0/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 '/node20/bin/node /node20/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/vercel/path0/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/vercel/path0/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | linux | x64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.0/canvas-v2.11.0-node-v115-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.0/canvas-v2.11.0-node-v115-linux-glibc-x64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v115 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.0/canvas-v2.11.0-node-v115-linux-glibc-x64.tar.gz 
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 ok 
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.9.16 found at "/usr/bin/python3"
npm ERR! gyp http GET https://nodejs.org/download/release/v20.12.1/node-v20.12.1-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v20.12.1/node-v20.12.1-headers.tar.gz
npm ERR! gyp http GET https://nodejs.org/download/release/v20.12.1/SHASUMS256.txt
npm ERR! gyp http 200 https://nodejs.org/download/release/v20.12.1/SHASUMS256.txt
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/node20/lib/node_modules/npm/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 '/vercel/path0/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/node20/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/vercel/.cache/node-gyp/20.12.1/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=/vercel/.cache/node-gyp/20.12.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/node20/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/vercel/.cache/node-gyp/20.12.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/vercel/path0/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! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! Package 'pixman-1', required by 'virtual:world', not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 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.<anonymous> (/node20/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:518:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm ERR! gyp ERR! System Linux 5.10.174
npm ERR! gyp ERR! command "/node20/bin/node" "/node20/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/vercel/path0/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/vercel/path0/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v115"
npm ERR! gyp ERR! cwd /vercel/path0/node_modules/canvas
npm ERR! gyp ERR! node -v v20.12.1
npm ERR! gyp ERR! node-gyp -v v10.0.1
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 '/node20/bin/node /node20/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/vercel/path0/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/vercel/path0/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/vercel/path0/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1105:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:305:5)
npm ERR! node-pre-gyp ERR! System Linux 5.10.174
npm ERR! node-pre-gyp ERR! command "/node20/bin/node" "/vercel/path0/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /vercel/path0/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v20.12.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.5
npm ERR! node-pre-gyp ERR! not ok
npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-04-10T01_16_06_329Z-debug-0.log
Error: Command "npm install" exited with 1

To Reproduce

Steps to reproduce the behavior:

1. Clone the notabase GitHub project
2. Create a Supabase project. Apply the [full schema](https://github.com/churichard/notabase/blob/main/scripts/schema.sql) and [storage setup](https://github.com/churichard/notabase/blob/main/scripts/storage-setup.sql) using the Supabase SQL Editor.
3. Create a Vercel project. Create 3 env variables for the Vercel project [found here](https://github.com/churichard/notabase/blob/main/.env.local.example).
4. Deploy the Vercel project

Expected behavior

Successful deployment.

[ajaysehwal]

use 18 version of node in vercel which you can simply change from vercel project settings and first try to run vercel build locally