ivansevillaa / use-next-blurhash

A custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in nextjs getting so a better user experience.

useNextBlurhash

useNextBlurhash is a custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in Nextjs apps, getting so a better user experience.

To get more context I recommend you read this.

Requeriments

You need at least Next.js 11.

Installation

npm install use-next-blurhash

or

yarn add use-next-blurhash

Usage

useNextBlurhash accepts four values but only the hash is required

useNextBlurhash(hash, width, height, puch);

• hash: the encoded blurhash (you can obtain one here)
• width: a number to set the width of the blurred image (160 by default)
• height: a number to set the height of the blurred image (120 by default)
• punch: a number that adjusts the contrast of the output image (optional)

Is not necessary that the width and the height that we passed are the same that the original image, I personally recommend you to use the default values because at the end the blurred image will cover all the original image space and looks good.

Example

import Image from "next/image";
import useNextBlurhash from "use-next-blurhash";

export default function Something(props) {
   const [blurDataUrl] = useNextBlurhash("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
   
   return (
      <Image
         src="https://nextjs.org/static/images/learn.png"
         placeholder="blur"
         blurDataURL={blurDataUrl}
         alt="Picture of the author"
      />
   );
}

Config to deploy with Vercel

If you deploy with Vercel, you may have an error something like this: version ZLIB_1.2.9' not found` You can fix it following these steps

Also, you can check the original issue and solution to understand what is going on.

• Ref to the original issue.
• Ref to the original solution.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

use-next-blurhash's Issues

Why a hook?

Hey!

First of all, thank you for this tiny lib.

I'm wondering... why does this have to be a hook? Can't it be a simple function like blurHashToBase64? I'm really curious about your motivation for the fashion you came up with.

hydration error when using SSR

getting blur-data using:

const [blurDataUrl] = useNextBlurhash(country.photo_blurhash);

and then using it in image component:

  placeholder="blur"
  blurDataURL={blurDataUrl}

causes a hydration error as client and server side produces different outputs.

How to not block rendering?

Hi!

I tried using this on a site with 100+ images, but the page freezes for about 5 seconds when loading it. How can i load it async?

Installable package broken due to questionable code change in build

I haven't gotten to the bottom of "why", but in the package on npm, this snippet of code:

[...pixels]

Is compiled to:

[].concat(pixels)

And this appears to be breaking the output (I just get a blank png, regardless of input).

If I change my import to the following, the lib works fine:

import useNextBlurhash from "use-next-blurhash/src";

suggestion: don't use canvas anymore

So I found this great gist that can decode a blurhash directly into a data url, no canvas required:
https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff

Creating a canvas element every time to decode the blurhash into a data url adds quite a bit of overhead, additionally, on the node side it requires you to use the entire canvas package (which is a rather large dependency because it needs to be able to do everything canvas can)

Not working on latest version of nextjs

None of the versions of this library are working so here's a quick replacement as I couldn't find any, I made my own but I don't have the time to turn it into a library I put my code here and anyone can make it into a library or maybe this repo adapts it.

How to make it work

All credits of the functionality goes to https://gist.github.com/mattiaz9 I was only able to make this work thanks to his function at:
https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff

1. Copy and paste that into your project under a file named: blurHashToDataURL.ts
2. Copy and paste my component in a file named: ImageHash.tsx

import {blurHashToDataURL} from "@src/lib/blurhash/blurHashToDataURL";
import Image from "next/image";
import {useMemo} from "react";

type Props = {};

export default function ImageHash({
    blurhash,
    ...props
}: React.ComponentProps<typeof Image> & {blurhash?: string}) {
    const base64BlurHash = useMemo(() => {
        if (blurhash) {
            return blurHashToDataURL(blurhash);
        }
        return null;
    }, [blurhash]);

    return (
        // eslint-disable-next-line jsx-a11y/alt-text
        <Image
            placeholder="blur"
            blurDataURL={base64BlurHash || undefined}
            {...props}
        />
    );
}

Install blurhash using npm|yarn|bun.

Usage example

Not that ImageHash's syntax is exactly the same as Image component from nextjs it just adds one new prop: blurhash pass your blurhash and you're done.

<ImageHash
    blurhash={value.photo_hash}
    src={`/image.png`}
    width={500}
    height={375}
/>

hook returns gray image

When using hook url returned is always gray image

When using same hash on blurga.sh this is what I get, so hash is ok

And the image I'm trying to hash

xxx has "placeholder='blur'" property but is missing the "blurDataURL" property.

I implemented it the same way as stated in the readme but I am getting the error that blurDataURL isn't set.
I assume that this is because useEffect is used so the blurDataURL is empty on render.

Error: Cannot find module '../build/Release/canvas.node'

EDIT: nvm, just realized the package use-next-blurhash won't install because canvas won't install, because of apple M1 chip (most likely). Leaving this here for anyone else running into this issue.

EDIT2: Managed to install use-next-blurhash by first running brew install pkg-config cairo pango libpng jpeg giflib librsvg. Still doesn't work, blurDataUrl is still undefined. Too deep of a rabbit hole to go through for me just for a blur preview, so stopping here. If anyone finds a solution to get this working on M1 Macs, please post below.

installed the package and used the example inside the documentation:

import Image from "next/image";
import useNextBlurhash from "use-next-blurhash";

export default function Something(props) {
   const [blurDataUrl] = useNextBlurhash("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
   
   return (
      <Image
         src="https://nextjs.org/static/images/learn.png"
         placeholder="blur"
         blurDataURL={blurDataUrl}
         alt="Picture of the author"
      />
   );
}

blurDataUrl is undefined and getting error:

Server Error
Error: Cannot find module '../build/Release/canvas.node'
Require stack:
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/canvas/lib/bindings.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/canvas/lib/canvas.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/canvas/index.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/use-next-blurhash/dist/use-next-blurhash.cjs.development.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/use-next-blurhash/dist/index.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/.next/server/pages/[...slug].js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/server/require.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/server/load-components.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/build/utils.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/build/output/store.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/build/output/index.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/cli/next-dev.js
- /Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/bin/next

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Function.Module._resolveFilename
node:internal/modules/cjs/loader (933:15)
Function.mod._resolveFilename
file:///Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/next/dist/build/webpack/require-hook.js (183:28)
Function.Module._load
node:internal/modules/cjs/loader (778:27)
Module.require
node:internal/modules/cjs/loader (999:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.<anonymous>
file:///Users/ovs/Work/Dev/klc/klc-next-web-sanity/node_modules/canvas/lib/bindings.js (3:18)
Module._compile
node:internal/modules/cjs/loader (1099:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1153:10)
Module.load
node:internal/modules/cjs/loader (975:32)
Function.Module._load
node:internal/modules/cjs/loader (822:12

Versions

"next": "12.1.0",
"react": "17.0.2",

[Solved] Vercel Deployment Error (version `ZLIB_1.2.9' not found)

This is an issue report for solving common issues.

I created an example project to demonstrate the use of the hook for projects deployed in Vercel.

https://github.com/BrunoS3D/use-next-blurhash-hook-example
https://use-next-blurhash.vercel.app/

You have possibly run into this error when implementing the hook

You can solve it by simply adding this code snippet to your next.config.js file as shown here

if (
  process.env.LD_LIBRARY_PATH == null ||
  !process.env.LD_LIBRARY_PATH.includes(
    `${process.env.PWD}/node_modules/canvas/build/Release:`,
  )
) {
  process.env.LD_LIBRARY_PATH = `${
    process.env.PWD
  }/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ''}`;
}

Ref to original solution
Automattic/node-canvas#1779 (comment)

Another similar error that doesn't show as many details can also be solved using the solution above:

NOTE: @ivansevillaa, if possible, leave this issue fixed for other people to find a solution for similar issues

Install Error npm

Getting this error when running npm install

using next 12.3.1 and react 18.2.0

npm ERR! code 1
npm ERR! path /Users/devdesign/Documents/F3Manifesto/homeport/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 '/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node /Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (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] | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (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.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.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] | darwin | arm64
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] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.10.6 found at "/Users/devdesign/.asdf/installs/python/3.10.6/bin/python3"
npm ERR! gyp info spawn /Users/devdesign/.asdf/installs/python/3.10.6/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/devdesign/.asdf/installs/nodejs/16.14.0/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   '/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/devdesign/Library/Caches/node-gyp/16.14.0/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=/Users/devdesign/Library/Caches/node-gyp/16.14.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/devdesign/Library/Caches/node-gyp/16.14.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/devdesign/Documents/F3Manifesto/homeport/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! No package 'pixman-1' 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.onCpExit (/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:259:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node" "/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd /Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v8.4.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 '/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node /Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.6.0
npm ERR! node-pre-gyp ERR! command "/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node" "/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.14.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.10
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/devdesign/.npm/_logs/2022-11-11T21_26_20_224Z-debug-0.log
> npm i use-next-blurhash
npm ERR! code 1
npm ERR! path /Users/devdesign/Documents/F3Manifesto/homeport/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 '/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node /Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (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] | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (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.10.2/canvas-v2.10.2-node-v93-darwin-unknown-arm64.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] | darwin | arm64
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] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.10.6 found at "/Users/devdesign/.asdf/installs/python/3.10.6/bin/python3"
npm ERR! gyp info spawn /Users/devdesign/.asdf/installs/python/3.10.6/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/devdesign/.asdf/installs/nodejs/16.14.0/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   '/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/devdesign/Library/Caches/node-gyp/16.14.0/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=/Users/devdesign/Library/Caches/node-gyp/16.14.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/devdesign/Library/Caches/node-gyp/16.14.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/devdesign/Documents/F3Manifesto/homeport/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! No package 'pixman-1' 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.onCpExit (/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:259:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node" "/Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd /Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v8.4.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 '/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node /Users/devdesign/.asdf/installs/nodejs/16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.6.0
npm ERR! node-pre-gyp ERR! command "/Users/devdesign/.asdf/installs/nodejs/16.14.0/bin/node" "/Users/devdesign/Documents/F3Manifesto/homeport/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/devdesign/Documents/F3Manifesto/homeport/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v16.14.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.10
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/devdesign/.npm/_logs/2022-11-11T21_27_01_082Z-debug-0.log

SSR?

How to use this with server side rendering?