Zenn
🤯

node-canvasとsharpは共存できない

2023/09/13に公開
Node.js
canvas
sharp
tech

結構前に作ったNuxt.jsのプロジェクトをpnpmに移行してたんですが、その中で

「MacOSでは発生しないのにWindowsでは発生する」

という謎のエラーに遭遇しました。
そのエラーというのが

\\?\C:\Users\minato86\Repository\hogehoge\fugafuga\node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\build\Release\canvas.node

  \\?\node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\build\Release\canvas.node
  at Object.Module._extensions..node (node:internal/modules/cjs/loader:1249:18)
  at Module.load (node:internal/modules/cjs/loader:1043:32)
  at Function.Module._load (node:internal/modules/cjs/loader:878:12)
  at Module.require (node:internal/modules/cjs/loader:1067:19)
  at require (node:internal/modules/cjs/helpers:103:18)
  at jiti (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:253185)
  at node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\lib\bindings.js:3:18
  at evalModule (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:255614)
  at jiti (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:253542)
  at node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\lib\canvas.js:9:18
  at evalModule (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:255614)
  at jiti (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:253542)
  at node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\index.js:1:91
  at evalModule (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:255614)
  at jiti (node_modules\.pnpm\jiti@1.20.0\node_modules\jiti\dist\jiti.js:1:253542)
  at node_modules\.pnpm\text-svg@1.0.4\node_modules\text-svg\index.js:4:5


╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮│                                                                                                                                     ││   ✖ Nuxt Fatal Error                                                                                                                ││                                                                                                                                     ││   Error: The specified procedure could not be found.                                                                                ││   \\?\C:\Users\minato86\Repository\hogehoge\fugafuga\node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\build\Release\can   ││   vas.node                                                                                                                          ││                                                                                                                                     │╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

 ELIFECYCLE  Command failed with exit code 1.

です。
めっちゃ崩れてて見にくいと思うので抜粋すると

Error: The specified procedure could not be found.
\\?\C:\Users\minato86\Repository\hogehoge\fugafuga\node_modules\.pnpm\canvas@2.11.2\node_modules\canvas\build\Release\canvas.node

となります。

初めはpnpm移行に際してのエラーかと思っていたんですが、調べるうちにそうではないことがわかりました。

https://sharp.pixelplumbing.com/install#canvas-and-windows

sharpライブラリの公式ページにも記載がある通り、現時点でsharpとnode-canvasは共存できません。

https://github.com/Automattic/node-canvas/issues/930
一応Issueも立っています。

細かいことはわからないんですが、どうやら両者がビルドするdllファイルには若干APIに違いがあって、呼び出し側はどちらのdllを呼んでいるかわからないからエラーになる、といった具合なようです。

この問題はWindowsのみで発生するようで、Mac等では発生しないそう。

とりあえず私はcanvasは使用しない方向で進めていきます。

以上

Discussion