Electron React Boilerplateで特定のライブラリ使用時にビルド後に起こるエラーの対処法

目次

1.はじめに
2.環境
3.発生したエラー
4.原因
5.対処方法

1.はじめに

「Electron React Boilerplate」を使用したプロジェクトにおいて、
一度パッケージ化した後に、「npm start」で実行を開始すると、
エラーが発生して実行できなかったことがあった為、その対処方法をまとめました。

2.開発環境

• OS : Windows10
• Node js : v18.17.0
• Electron : v25.0.1
• typescript

3.発生したエラー

「Electron React Boilerplate」を使用したプロジェクトにおいて、
「Fabric.js」をインストールした状態で、
「electron-builder」を用いてプロジェクトのビルドを行った後、
「npm start」コマンドで実行すると、下記のエラーが発生する。

The DLL files are missing. Sit back while we build them for you with "npm run build-dll"
[webpack-cli] Failed to load 'S:\Electron\000.test\rbp\.erb\configs\webpack.config.renderer.dev.ts' config
[webpack-cli] Error: Command failed: npm run postinstall
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at Object.<anonymous> (S:\Electron\000.test\rbp\.erb\configs\webpack.config.renderer.dev.ts:38:11)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module.m._compile (S:\Electron\000.test\rbp\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Object.require.extensions.<computed> [as .ts] (S:\Electron\000.test\rbp\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12) {
  status: 1,
  signal: null,
  output: [
    null,
    <Buffer 0a 3e 20 70 6f 73 74 69 6e 73 74 61 6c 6c 0a 3e 20 74 73 2d 6e 6f 64 65 20 2e 65 72 62 2f 73 63 72 69 70 74 73 2f 63 68 65 63 6b 2d 6e 61 74 69 76 65 ... 720 more bytes>,
    <Buffer >
  ],
  pid: 33812,
  stdout: <Buffer 0a 3e 20 70 6f 73 74 69 6e 73 74 61 6c 6c 0a 3e 20 74 73 2d 6e 6f 64 65 20 2e 65 72 62 2f 73 63 72 69 70 74 73 2f 63 68 65 63 6b 2d 6e 61 74 69 76 65 ... 720 more bytes>,
  stderr: <Buffer >
}

4.原因

「dll」フォルダ(.erb/dll)が削除されていることが原因。

本来、一番最初に「npm start」を行った際に「.erb」内に「dll」フォルダが作成されているはずが、これがビルド後に削除されている。

※「.erb」は「electron react boilerplate」の略

通常であれば「dll」フォルダが無い状態で「npm start」を実行すると再度「dll」フォルダが作成される。

しかし、「fabric.js」をインストール状態で「dll」フォルダを作成しようとすると作成に失敗してしまう。

これらにより上記のエラーが発生する。

dllが削除される理由

ビルド時に「.erb/clean.js」が実行され、そこでdllが削除されるようになっている。

5.対処方法

「.erb/scripts/clean.js」の webpackPaths.dllPath をコメントアウトする。

import { rimrafSync } from 'rimraf';
import fs from 'fs';
import webpackPaths from '../configs/webpack.paths';

const foldersToRemove = [
  webpackPaths.distPath,
  webpackPaths.buildPath,
  //webpackPaths.dllPath, <- ここをコメントアウト
];

foldersToRemove.forEach((folder) => {
  if (fs.existsSync(folder)) rimrafSync(folder);
});

これによりビルド時に「dll」フォルダが削除されなくなるため、
ビルド後も「npm start」で実行できるようになる。