React-PDF 導入後、Windows で npm start (electron-forge start) に失敗する

[a2311kk]

バグの説明

React-PDF 導入後、Windows で npm start (electron-forge start) に失敗する

バグの再現手順

期待される動作

スクリーンショット

追加のコンテキスト

[a2311kk]

エラー内容

> manakan@1.0.0 start
> electron-forge start

✔ Checking your system
✔ Locating application
✔ Loading configuration
✖ Preparing native dependencies: 0 / 1
  › node-gyp failed to rebuild 'D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas'
◼ Running generateAssets hook

› Warning: Missing input files:
C:\GTK\bin\libfreetype-6.dll
C:\GTK\bin\libintl-8.dll
C:\GTK\bin\libpangowin32-1.0-0.dll
C:\GTK\bin\libpangoft2-1.0-0.dll
C:\GTK\bin\libfontconfig-1.dll
C:\GTK\bin\libgobject-2.0-0.dll
C:\GTK\bin\libexpat-1.dll
C:\GTK\bin\libcairo-2.dll
C:\GTK\bin\libpangocairo-1.0-0.dll
C:\GTK\bin\libpango-1.0-0.dll
C:\GTK\bin\libgthread-2.0-0.dll
C:\GTK\bin\libglib-2.0-0.dll
C:\GTK\bin\libgmodule-2.0-0.dll
C:\GTK\bin\zlib1.dll
C:\GTK\bin\libpng14-14.dll

Backend.cc
D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas\src\backend\Backend.h(3,10):
error C1083: include ファイルを開けません。'cairo.h':No such file or directory
[D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas\build\canvas.vcxproj]
Error: `C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exe`
failed with exit code: 1
at ChildProcess.onExit
(D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\node-gyp\lib\build.js:203:23)
at ChildProcess.emit (node:events:519:28)
at ChildProcess._handle.onexit (node:internal/child_process:294:12)

[a2311kk]

electron-forge make ではエラーは発生しない。

[a2311kk]

React-PDF が依存している PDF.js が依存している node-canvas と、electron-forge start の相性による問題ではないかと思われる。

node-canvas について、デフォルトでは、以下のプラットフォームであれば事前ビルドされたバイナリがダウンロードされる。それ以外の場合、モジュールはソースコードからコンパイルされる。

• macOS x86/64 (not Apple silicon)
• Linux x86/64 (glibc only)
• Windows x86/64

https://github.com/Automattic/node-canvas?tab=readme-ov-file#installation

おそらく、electron-forge make の場合は事前ビルドされたバイナリがダウンロードされており、エラーが発生しない。一方で、electron-forge start の場合はなぜかコンパイルが実行され、エラーになる。

node-canvas のコンパイルには、OS ごとに異なる手順で依存関係のインストールが必要になる。
https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling

Windows の場合、以下の手順を実行する必要がある。
https://github.com/Automattic/node-canvas/wiki/Installation:-Windows#install-manually

これでコンパイルエラーが解消するかと思われたが、新たに以下のエラーが発生した。

Canvas.obj : error LNK2001: 外部シンボル "__declspec(dllimport) public: class std::shared_ptr<class
v8::BackingStore> __cdecl v8::ArrayBuffer::GetBackingStore(void)"
(__imp_?GetBackingStore@ArrayBuffer@v8@@QEAA?AV?$shared_ptr@VBackingStore@v8@@@std@@XZ) は未解決です
[D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas\build\canvas.vcxproj]
D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas\build\Release\canvas.node : fatal
error LNK1120: 1 件の未解決の外部参照
[D:\Users\user\Documents\AIIT\PBL\repos\manakan\node_modules\canvas\build\canvas.vcxproj]

このエラーと同じものが以下で報告されていた。どうやら、node-canvas が依存する NAN に問題があるらしい。
Automattic/node-canvas#1589

この問題は、以下の PR で NAN を取り除くことで解決されている。
Automattic/node-canvas#2235

しかし、上記 PR の変更が含まれるのは Pre-release の v3.0.0-rc2 らしい。
https://github.com/Automattic/node-canvas/releases/tag/v3.0.0-rc2

React-PDF が依存している PDF.js は、それより古いバージョンの node-canvas に依存しているので、解決にならない。

ただし、package.json の overrides を使用すると、依存関係を無理やり上書きすることはできる。

{
  "overrides": {
    "canvas": "3.0.0-rc2"
  }
}

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

しかし、何の問題ない Windows 以外の環境や、electron-forge make の成果物に影響を与えてしまう上に、Pre-release を使うことや、メジャーバージョンが変わるので互換性に問題があるのではないか等の問題がある。

ちなみに、PDF.js を直接インストールする場合、--omit=optional を指定すれば、node-canvas をインストールしないことが可能らしい。
mozilla/pdf.js#15652

ただし、React-PDF から芋づる式にインストールする場合は不可能か、可能でも方法が分からない。

[a2311kk]

とりあえず何とかする方法

node_modules\canvas を削除する。これで electron-forge start が成功するようになる。

https://www.reddit.com/r/electronjs/comments/15gxnmu/electron_builder_error_with_canvas/?rdt=64808

[a2307yo]

私も「とりあえず何とかする方法」でelectron-forge start が成功しました！

[a2311kk]

もう少しマシかもしれない解決方法

forge.config.js に、rebuildConfig: { onlyModules: [] } を設定する。

まず、Electron は Native Node Modules をサポートしている。具体的には、@electron/rebuild というパッケージによって、native modules を rebuild できる。特に、Electron Forge を使っている場合には、このツールは自動的に使用される。
https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules

次に、forge.config.js には rebuildConfig という設定があり、これは Electron Forge の Start コマンドの中で @electron/rebuild に送られる。
https://www.electronforge.io/config/configuration#electron-rebuild-config

さらに、rebuildConfig には onlyModules というオプションがある。このオプションにモジュールの配列を指定すると、指定されたものだけが rebuild される。
https://github.com/electron/rebuild#how-can-i-integrate-this-into-grunt--gulp--whatever

よって、rebuildConfig.onlyModules に空配列を指定すると、何も rebuild されなくなり、当然 node-canvas も rebuild されないので、エラーが発生しなくなる。