search

wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.
https://projects.wojtekmaj.pl/react-pdf
MIT License
9.24k stars 877 forks source link

Error building optional dependency `canvas` on M2 Mac #1589

Closed cravend closed 11 months ago

cravend commented 1 year ago

Before you start - checklist

Description

When I installed react-pdf@7.3.3, I started getting the following error every time I run yarn install. PDFs are still rendered properly. This does not happen on react-pdf@6.2.2 but does on react-pdf@7.0.0.

Steps to reproduce

Expected behavior

No error should be produced

Actual behavior

warning Error running install script for optional dependency: "/[...root]/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments:
Directory: /[...root]/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.11
node-pre-gyp info using node@18.16.1 | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
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-v108-darwin-unknown-arm64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.16.1 (node-v108 ABI, unknown) (falling back to source compile with node-gyp)
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-v108-darwin-unknown-arm64.tar.gz
gyp info it worked if it ends with ok
gyp info using node-gyp@9.3.1
gyp info using node@18.16.1 | darwin | arm64
gyp info ok
gyp info it worked if it ends with ok
gyp info using node-gyp@9.3.1
gyp info using node@18.16.1 | darwin | arm64
gyp info find Python using Python version 3.10.12 found at \"/Users/user/.pyenv/versions/3.10.12/bin/python3\"
gyp info spawn /Users/user/.pyenv/versions/3.10.12/bin/python3
gyp info spawn args [
gyp info spawn args   '/Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/[...root]/node_modules/canvas/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/user/Library/Caches/node-gyp/18.16.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/user/Library/Caches/node-gyp/18.16.1',
gyp info spawn args   '-Dnode_gyp_dir=/Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/user/Library/Caches/node-gyp/18.16.1/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/[...root]/node_modules/canvas',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 22.5.0
gyp ERR! command \"/Users/user/.volta/tools/image/node/18.16.1/bin/node\" \"/Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"configure\" \"--fallback-to-build\" \"--update-binary\" \"--module=/[...root]/node_modules/canvas/build/Release/canvas.node\" \"--module_name=canvas\" \"--module_path=/[...root]/node_modules/canvas/build/Release\" \"--napi_version=8\" \"--node_abi_napi=napi\" \"--napi_build_version=0\" \"--node_napi_label=node-v108\"
gyp ERR! cwd /[...root]/node_modules/canvas
gyp ERR! node -v v18.16.1
gyp ERR! node-gyp -v v9.3.1
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/Users/user/.volta/tools/image/node/18.16.1/bin/node /Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/[...root]/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/[...root]/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/[...root]/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
node-pre-gyp ERR! System Darwin 22.5.0
node-pre-gyp ERR! command \"/Users/user/.volta/tools/image/node/18.16.1/bin/node\" \"/[...root]/node_modules/canvas/node_modules/.bin/node-pre-gyp\" \"install\" \"--fallback-to-build\" \"--update-binary\"
node-pre-gyp ERR! cwd /[...root]/node_modules/canvas
node-pre-gyp ERR! node -v v18.16.1
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
node-pre-gyp ERR! not ok
Failed to execute '/Users/user/.volta/tools/image/node/18.16.1/bin/node /Users/user/.volta/tools/image/node/18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/[...root]

Additional information

No response

Environment

wojtekmaj commented 1 year ago

https://github.com/Automattic/node-canvas/wiki/Installation%3A-Mac-OS-X

cravend commented 1 year ago

I'd prefer not to install a bunch of random brew packages to build an optional sub-sub dependency. Is there a way to suppress this error / not attempt to install canvas at all? Or is something I should open an issue about on their side?

wojtekmaj commented 1 year ago

With Yarn, you could try and use Yarn Resolutions to replace canvas module with an empty module you can put in your repository. Something like export default {}. Let me know if this works.

sashchukalex commented 1 year ago

Feel free to install: brew install pkg-config cairo pango

cravend commented 1 year ago

I am using Yarn 1 so the resolutions config was a little different, but this works for me:

  "resolutions": {
    "canvas": "link:./node_modules/.cache/null"
  },

(solution found on slackoverflow)

p.s. using pnpm suppresses the failed output for optional dependencies, instead outputting just one line of warning:

node_modules/.pnpm/canvas@2.11.2/node_modules/canvas: Running install script, failed in 1.4s (skipped as optional)
wojtekmaj commented 11 months ago

Since Next.js specific instructions are now properly documented in README, including solution for this problem, and since Next.js working samples are provided as well, I'm closing this. Please refer to README and samples for the latest recommended settings.

cravend commented 11 months ago

For what it’s worth, we aren’t using Next.js in our build. However, as explained above the resolutions is a way to override this issue if necessary (so I think it’s good to close)