質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,966

agepan

score 64

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)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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で起動

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/25 22:27 編集

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

    キャンセル

  • 2019/02/25 23:33

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

    キャンセル

  • 2019/02/26 06:59

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る