Electronアプリを起動するとエラーが出る

Question

Electronでアプリを開発しております。

開発中のElectronアプリを起動すると、コンソールに「Uncaught TypeError: Cannot read property 'on' of undefined at app.js:28」というエラーが表示されます。

const { Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {

    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // 開発ツールを有効化
    // mainWindow.webContents.openDevTools();

    Menu.setApplicationMenu(null);

    mainWindow.on('closed', () => {
        mainWindow = null;
    });

}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

↓他のサイトを参考に、最初の3行部分を下記に書き換えてみましたが、起動してみると同じエラーが発生しております。

const { Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
const electron = require("electron");
const app = electron.app;

このエラーの対処法をご存知の方がいらっしゃいましたらご教授頂ければと思います。

Electronのバージョンはv4.0.5、このアプリを作成した手順は以下の通りです。
（1）アプリ名を付けたフォルダを作成
（2）main.js（名称をapp.jsに変更）やpackage.jsonなどを作成
（3）このディレクトリにターミナルからElectronをインストール（npm i -D electron）

よろしくお願いいたします。

Answer 1

自己解決いたしました。main.js(ここではapp.jsに変更)をindex.htmlのheadで直接読み込んでおりましたが、読み込まなくとも認識されるようで、なおかつその場合であればエラーが出ることはありませんでした。アプリに関する機能は別途JavaScriptファイルを作って、index.htmlのheadで読み込ませることで、動作するようになりました。

Answer 2

electronあまり触ってませんがappが未定義なのが問題ですね。
const { Menu, BrowserWindow } = require('electron');
は
const { app, Menu, BrowserWindow } = require('electron');ではないでしょうか。

もしくは

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;

のように代入するかかな

※コメントで動かないとなってましたので自身でも試してみましたが、一応これで動きましたけど見比べてみてください

const { app, Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {

    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // 開発ツールを有効化
    // mainWindow.webContents.openDevTools();

    Menu.setApplicationMenu(null);

    mainWindow.on('closed', () => {
        mainWindow = null;
    });

}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

一応package.json

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^4.0.5"
  }
}

※npm run startで起動

Comments

[agepan]

ご回答ありがとうございます。
const { app, Menu, BrowserWindow } = require('electron');
確かにこの部分はこのコードで実装しておりました。試すうちにappをconst app = electron.app;と入れたので、試しにappだけ消してみていました。

またご掲示頂いたコードで試してみましたが、同じエラーが出てしまいました。

[agepan]

試してみましたがやはりコンソールにエラー表示が残ります。一応起動はするのですが、エラーがずっと残る感じであります。ちなみに別フォルダに最小限のファイルだけ置いてテストしてみましたが、こちらでも同じエラーが起きていました。

さらに「npm run start」を実行しますと、タイトル「Error launching app」、本文「Unable to find Electron app at ※※ディレクトリパス※※　Cannot find module '※※ディレクトリパス※※'」というエラー画面が出ました。

[rururu3]

>さらに「npm run start」を実行しますと、タイトル「Error launching app」、本文「Unable to find >Electron app at ※※ディレクトリパス※※　Cannot find module '※※ディレクトリパス※※'」というエ>ラー画面が出ました

このエラーはpackage.jsonのscriptsコマンドでapp.jsを指定してないからではと

[agepan]

"start": "electron .",の部分にJavaScriptファイルのパスを入れるということですね。npm run startで起動しましたが、エラー内容は変わりありませんでした。

[rururu3]

scriptsコマンドでapp.js
↑記載間違えてましたね、
"main": "main.js",
を起動するファイル名(質問を見る限りapp.js)にしないといけません

[agepan]

この点も修正を入れましたので問題ないかと思います。何か他にインストールしないといけないものでもあるんでしょうか…

[agepan]

自己解決いたしました(別途記述)。app.jsをindex.htmlのheadで直接読み込むことがエラーの原因でした。ご回答ありがとうございました。