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.
MIT License
72 stars 6 forks source link

Install Error npm #9

Open emmajane1313 opened 1 year ago

emmajane1313 commented 1 year ago

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 node-pre-gyp@1.0.10
npm ERR! node-pre-gyp info using node@16.14.0 | 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 canvas@2.10.2 and node@16.14.0 (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 node-gyp@8.4.1
npm ERR! gyp info using node@16.14.0 | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@8.4.1
npm ERR! gyp info using node@16.14.0 | 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 node-pre-gyp@1.0.10
npm ERR! node-pre-gyp info using node@16.14.0 | 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 canvas@2.10.2 and node@16.14.0 (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 node-gyp@8.4.1
npm ERR! gyp info using node@16.14.0 | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@8.4.1
npm ERR! gyp info using node@16.14.0 | 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
ivansevillaa commented 1 year ago

Sorry for be late. Are you using a Mac with M1 chip?

ghunkins commented 1 year ago

Having this same issue, and yes a Mac with M1 chip!

ivansevillaa commented 1 year ago

Take a look at this https://github.com/ivansevillaa/use-next-blurhash/issues/7

Anyway. We don´t use canvas dependency anymore. Use the last version of the package (1.0.4) and it should work

dukesx commented 1 year ago

Take a look at this #7

Anyway. We don´t use canvas dependency anymore. Use the last version of the package (1.0.4) and it should work

Still causing error, dependency is there, canvas is not removed

ivansevillaa commented 1 year ago

@dukesx yes sorry, the publish to npm doesn't work well. Now version 1.0.5 is without canvas dependency