imageminを使ったelectronアプリがbuild後にエラーで動かない(Error:occurred when handling file)

アプリケーションの概要

業務支援を目的としたアプリケーションを作成しています。

参考　Electronで業務効率化ツールを作成（環境準備）

今回のツールは、ドラッグアンドドロップした画像をサイズ変更、ファイル変換、圧縮するツールになります。

利用している外部パッケージ

• imagemin: ^7.0.1
• imagemin-jpegtran: ^7.0.0
• imagemin-pngquant: ^9.0.1
• jimp: ^0.16.1

現象

開発時のデバックモードではエラーが発生しないが、ビルドして作成した実行モジュール(exe/app)をつかうと以下のエラーが発生する。

Error: Error occurred when handling file: C://Users//OneDrive//デスクトップ//Resizimg20210102_010605//tmp//2019-09-09_22h02_48.png

Error: write EPIPE
    at afterWriteDispatched (internal/stream_base_commons.js:154)
    at writeGeneric (internal/stream_base_commons.js:145)
    at Socket._writeGeneric (net.js:786)
    at Socket._write (net.js:798)
    at doWrite (_stream_writable.js:403)
    at writeOrBuffer (_stream_writable.js:387)
    at Socket.Writable.write (_stream_writable.js:318)
    at Socket.Writable.end (_stream_writable.js:585)
    at Socket.end (net.js:590)
    at handleInput (D:\Git\electron\Resizimg\dist\win-unpacked\resources\app.asar\node_modules\execa\lib\stream.js:17)
app.js:314 Error: write EPIPE
    at afterWriteDispatched (internal/stream_base_commons.js:154)
    at writeGeneric (internal/stream_base_commons.js:145)
    at Socket._writeGeneric (net.js:786)
    at Socket._write (net.js:798)
    at doWrite (_stream_writable.js:403)
    at writeOrBuffer (_stream_writable.js:387)
    at Socket.Writable.write (_stream_writable.js:318)
    at Socket.Writable.end (_stream_writable.js:585)
    at Socket.end (net.js:590)
    at handleInput (D:\Git\electron\Resizimg\dist\win-unpacked\resources\app.asar\node_modules\execa\lib\stream.js:17)

原因

ビルドで作成したexeをデバッグモードで動かして、エラー個所を調査した結果、以下の個所で例外エラー（Exception）が発生していました。

D:\**\dist\win-unpacked\resources\app.asar\node_modules\imagemin-pngquant\index.js

	const subprocess = execa(pngquant, args, {
		encoding: null,
		maxBuffer: Infinity,
		input
	});

変数を見ていると、execaの引数である「pngquant」は「imagemin-pngquant」の実行モジュールのパスが格納されています。このパスが開発時と実行モジュールで別のパスを見ていました。

const pngquant = require('pngquant-bin');

“D:\Git\electron\Resizimg\dist\win-unpacked\resources\app.asar\node_modules\pngquant-bin\vendor\pngquant.exe”

ビルドしたexeが参照しているpngguantのパス

実行時は「app.asar」を見ている。

開発時のデバッグモードで参照しているpngguantのパス

開発時の環境では「app.asar」ではなく、「pngguant.exe」の実行モジュールを直接見ている。

対応

pakage.jsonの修正

以下の内容を参考にしました。

https://github.com/imagemin/imagemin-mozjpeg/issues/39

pakage.jsonに「”asar”: false」を追加します。

  "build": {
    "asar": false,
    }

所感

以下の警告が追加されるようになりましたが、動かないよりはいいかな。

asar usage is disabled — this is strongly not recommended solution=enable asar and use asarUnpack to unpack files that must be externally available

ビルド時のメッセージ

> Resizimg@1.0.0 build-win D:\Git\electron\Resizimg
> electron-builder --win --x64

(node:8792) ExperimentalWarning: The fs.promises API is experimental
  • electron-builder  version=22.9.1 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • description is missed in the package.json  appPackageFile=D:\Git\electron\Resizimg\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=11.1.1 appOutDir=dist\win-unpacked
  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack files that must be externally available
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=dist\Resizimg Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false
  • building block map  blockMapFile=dist\Resizimg Setup 1.0.0.exe.blockmap