electron-builderでビルドが通ったがエラーも何も表示されない

Question

前提・実現したいこと

electron-builderでビルドが通ったのですが、何も表示されません。
レンダリングができるようにしたいです。

発生している問題・エラーメッセージ

exeファイルをクリックすると、
白い画面が出てきますが、
それ以外、何も表示されません。

また、Ctrl+Shift+Iを押して、コンソールでどのようなエラーを吐いているか確認しましたが、
エラーが全く出ていません。

一応ビルド結果を示します。

(base) PS D:\skytomo\Documents\Programming\otamashelf> npm run build:main

> otamashelf@0.1.0 build:main

(base) PS D:\skytomo\Documents\Programming\otamashelf> npm run build:render

> otamashelf@0.1.0 build:render
> webpack
asset bundle.js 5.96 MiB [emitted] (name: main) 1 related asset
asset index.html 324 bytes [compared for emit]
613 modules
webpack 5.28.0 compiled successfully in 24624 ms
(base) PS D:\skytomo\Documents\Programming\otamashelf> npm run start

> otamashelf@0.1.0 start
> electron ./dist/main.js


(base) PS D:\skytomo\Documents\Programming\otamashelf> npm run package:windows

> otamashelf@0.1.0 package:windows
> webpack && electron-builder --win --x64

asset bundle.js 5.96 MiB [compared for emit] (name: main) 1 related asset
asset index.html 324 bytes [compared for emit]
webpack 5.28.0 compiled successfully in 23893 ms
  • electron-builder  version=22.10.5 os=10.0.19042
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=product\builder-effective-config.yaml
  • "electron-squirrel-startup" dependency is not required for NSIS
  • packaging       platform=win32 arch=x64 electron=12.0.2 appOutDir=product\win-unpacked
  • Unpacking electron zip  zipPath=undefined
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=product\Otamajakushi Bookshelf Setup 0.1.0.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=product\Otamajakushi Bookshelf Setup 0.1.0.exe.blockmap

該当のソースコード

Package.json

{
  "name": "otamashelf",
  "version": "0.1.0",
  "description": "OTM-JSONファイルで書かれた辞書が開けるアプリ",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint . --fix",
    "start": "electron ./dist/main.js",
    "build:main": "tsc",
    "build:render": "webpack",
    "package:mac": "webpack && electron-builder --mac --x64",
    "package:windows": "webpack && electron-builder --win --x64",
    "package:linux": "webpack && electron-builder --linux --x64",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "build": {
    "productName": "Otamajakushi Bookshelf",
    "appId": "todo.example.com",
    "directories": {
      "output": "./product"
    },
    "files": [
      "./dist/**/*.js",
      "./index.html",
      "./main.js",
      "./icon/**/*"
    ],
    "extraMetadata": {
      "main": "./dist/main.js"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    }
  },
  "author": "skytomo",
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@mdi/font": "^5.9.55",
    "@mdi/js": "^5.9.55",
    "@mdi/react": "^1.4.0",
    "electron-squirrel-startup": "^1.0.0",
    "otamajakushi": "^1.1.0",
    "path": "^0.12.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.2"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "@electron-forge/plugin-webpack": "^6.0.0-beta.54",
    "@types/material-ui": "^0.21.8",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "@types/react-redux": "^7.1.16",
    "@typescript-eslint/eslint-plugin": "^4.16.1",
    "@typescript-eslint/parser": "^4.16.1",
    "electron": "^12.0.1",
    "electron-builder": "^22.10.5",
    "eslint": "^7.21.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.2.0",
    "prettier": "^2.2.1",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  },
  ...（省略）...
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Otamajakushi Bookshelf</title>
</head>

<body style="margin: 0px;">
    <div id="contents"></div>
</body>

</html>

main.ts

/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-var-requires */
import { app, BrowserWindow, dialog, ipcMain } from 'electron';
import { readFileSync } from 'fs';

// セキュアな Electron の構成
// 参考: https://qiita.com/pochman/items/64b34e9827866664d436

const createWindow = () => {
  const win = new BrowserWindow({
    width: 500,
    height: 700,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      // preload: `${__dirname}/preload.js`
    },
    frame: false,
    resizable: true,
  });

  // 読み込む index.html。
  // tsc でコンパイルするので、出力先の dist の相対パスで指定する。
  const path = require('path');
  win.loadFile('index.html');

  if (process.argv.find(arg => arg === '--debug')) {
    win.webContents.openDevTools();
  }

  ipcMain.handle('window-minimize', () => {
    win.minimize();
  });

  let fullScreen = false;

  ipcMain.handle('window-maximize', () => {
    win.setFullScreen((fullScreen = !fullScreen));
  });

  ipcMain.handle('window-close', () => {
    app.quit();
  });

  ipcMain.handle('file-open', async event => {
    // ファイルを選択
    const paths = dialog.showOpenDialogSync(win, {
      buttonLabel: '開く', // 確認ボタンのラベル
      filters: [{ name: 'OTM-JSON', extensions: ['json'] }],
      properties: [
        'openFile', // ファイルの選択を許可
        'createDirectory', // ディレクトリの作成を許可 (macOS)
      ],
    });

    // キャンセルで閉じた場合
    if (paths === undefined) {
      return { status: undefined };
    }

    // ファイルの内容を返却
    try {
      const filePath = paths[0];
      const buff = readFileSync(filePath);

      return {
        status: true,
        path: filePath,
        text: buff.toString(),
      };
    } catch (error) {
      return { status: false, message: error.message };
    }
  });
};

// Electronの起動準備が終わったら、ウィンドウを作成する。
app.whenReady().then(createWindow);

// すべての ウィンドウ が閉じたときの処理
app.on('window-all-closed', () => {
  // macOS 以外では、メインプロセスを停止する
  // macOS では、ウインドウが閉じてもメインプロセスは停止せず
  // ドックから再度ウインドウが表示されるようにする。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // macOS では、ウインドウが閉じてもメインプロセスは停止せず
  // ドックから再度ウインドウが表示されるようにする。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

その他のソースコードは
https://github.com/skytomo221/otamashelf
に公開しています。

試したこと

最初は

Not allowed to load local resource: file:///.../product/win-unpacked/resources/app.asar/index.html

というようなエラーが表示されており、

• Application entry file reset to default (react-cra detected and config changed incorrectly) #2030
• Electron & React & Redux & TypeScript アプリ作成ワークショップ9日目(最終回)
• electron-builderでビルドできない

などを参考に、色々とソースコードを変更した結果、ビルドは通るようになったのですが、
何も表示されません。

app.asarの中身を見るとこのようになってました。

dist
├bundle.js
└main.js
node_modules
index.html
package.json

このindex.htmlは次のようになっていました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Otamajakushi Bookshelf</title>
</head>

<body style="margin: 0px;">
    <div id="contents"></div>
</body>

</html>

一方で、dist/index.htmlでは

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Otamajakushi Bookshelf</title>
<script defer src="bundle.js"></script></head>

<body style="margin: 0px;">
    <div id="contents"></div>
</body>

</html>

でした。
おそらく、
この<script defer src="bundle.js">が含まれていないことが問題であるような気がしますが、
解決方法が思いつきません。

おそらく何か設定を間違えているのでしょうが、具体的にどこを修正すればいいか分かりませんでした。

補足情報（FW/ツールのバージョンなど）

• OS: Windows 10 Home
• npm: 7.6.3
• tsc: Version 4.2.3

Answer 1

本当に設定ミスでした。

main.ts

  win.loadFile('index.html');

を

  win.loadFile(path.join(__dirname, './index.html'));

に変更。

package.json

{
  ...
  "build": {
    ...
    "files": [
      "./dist/**/*.js",
      "./dist/index.html", /* ここ */
      "./main.js",
      "./icon/**/*"
    ],

に変更したら
うまくいきました。