preload.jsがrequire文で止まってしまう現象

Question

前提・実現したいこと

Electronでブラウザゲームのクライアントを開発しています。
Krunkerというゲームで、URLを使って知り合いと同じ試合に入ったりすることのできるものです。

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

preloadさせているスクリプトで

const electronPrompt = require("electron-prompt");

とするとその後の処理が止まってしまいます(この一行を削除すると他のpreload.js内の機能は正常に動くがこれがあると動かなくなる)。

該当のソースコード

// main.js
const { app, BrowserWindow, getCurrentWindow, clipboard, ipcMain } = require("electron");
const localShortcut= require("electron-localshortcut");
const inputPrompt = require("electron-prompt");
const path = require("path")

let gameWindow = null;

const initFlags = () => {
    app.commandLine.appendSwitch("disable-frame-rate-limit"); // 将来的には設定で変更可能にする
    app.commandLine.appendSwitch("enable-zero-copy")
};

const initGameWindow = () => {
    gameWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            contextIsolation: true
        }
    });
    gameWindow.setMenuBarVisibility(false)

    gameWindow.loadURL("https://krunker.io");

    initShortcutKeys();
    
    gameWindow.on("closed", () => {
        gameWindow = null;
    });
};

const initShortcutKeys = () => {
    const sKeys = [
        ["Esc", () => {             // ゲーム内でのESCキーの有効化
            gameWindow.webContents.send("ESC")
            console.log("ESC pressed.");
        }], 
        ["F5", () => {              // リ↓ロ↑ードする
            getCurrentWindow.reload()
        }],
        ["F6", () => {              // 別のマッチへ
            gameWindow.loadURL("https://krunker.io")
        }],
        ["F7", () => {              // クリップボードへURLをコピー(実質Inviteボタン)
            clipboard.writeText(gameWindow.webContents.getURL())
        }],
        ["F8", () => {              // クリップボードのURLへアクセス(実質Joinボタン)
            let copiedText = clipboard.readText();
            if (copiedText.substr(0, 25) === "https://krunker.io/?game=" || copiedText.substr(0, 30) === "https://comp.krunker.io/?game=") gameWindow.loadURL(copiedText);
        }],
        ["Shift+F8", () => {        // URLを入力するフォームの表示
            gameWindow.webContents.send("DIALOG_OPEN", "URL")
        }],
        ["Ctrl+Shift+F1", () => {   // クライアントの再起動
            app.relaunch();
            app.quit();
        }],
        ["Ctrl+F1", () => {         // 開発者ツールの起動
            gameWindow.webContents.openDevTools()
        }]
    ];

    sKeys.forEach((k) => {
            localShortcut.register(gameWindow, k[0], k[1])
        });
};

ipcMain.on("OPEN_LINK", (event, arg) => {
    gameWindow.loadURL(arg);
})

app.on("ready", () => {
    initFlags();
    initGameWindow();
});

// preload.js
const { ipcRenderer } = require("electron");
const { prompt } = require("electron-prompt");

const initIpc = () => {
    ipcRenderer.on("ESC", () => {
        document.exitPointerLock()
    });
    ipcRenderer.on("DIALOG_OPEN", (event, arg) => {
        switch(arg){
            case "URL":
                prompt({
                    title: "Join to the game",
                    label: "URL",
                    type: "input"
                }).then((r) => {
                    if(r !== null ) {
                        if (r.substr(0, 25) === "https://krunker.io/?game=" || r.substr(0, 30) === "https://comp.krunker.io/?game=") ipcRenderer.send("OPEN_LINK", r);
                    };
                }).catch(console.error);
        }
    })
};

initIpc();

試したこと

nodeIntegrationをtrueにしてみたりもしてみましたが特に意味がなく、package.jsonにもelectron-prommptの記載はすでに追記していたので原因がわかりません・・・

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

Windows 10 Home 最新版
node.js v14.15.4
Electron v11.2.1
electron-prompt v1.6.1

GitHub

Comments

[YND_teratail]

「const electronPrompt = require("electron-prompt")をすると、その後の処理が止まってしまう」と書いてありますが、エラーが出ずに、その後が動作していないのか、エラーが出て、そこで止まっているのかどちらでしょうか。

[zHiro527]

エラーが出ずにその後が動作していません。
Electronのエラーのポップアップ等も出ていません。
その行を削除すると他の機能（electron-promptを使わない部分）は機能します。
言葉散らずですみませんでした。よろしくお願いします。

Answer 1

electron-promptはレンダラープロセスではなくメインの方で動くものでした・・・。
メインスレッドの方でimportしたら普通に動きました！
みなさんありがとうございました！

Answer 2

const { prompt } = require("electron-prompt"); → const prompt = require("electron-prompt");
{}は分割代入といい、以下のように使います。

const obj = {a: 12, b: 53}; // objを作ったよ('ω')ノ

const {a,b,c} = obj; // 代入変数したよ('ω')ノ

console.log(a); // 12
console.log(b); // 53
console.log(c); // undefined

このとき、cをみてわかる通り、存在しない場合は、undefinedになります。
electron_promptは、ここのExampleにもある通り、分割代入を行っていません。
つまり、{}を使った時の変数promptには、undefinedが入るため、その後の処理が実行されなくなってしまうのではないでしょうか。