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

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

ただいまの
回答率

90.47%

  • Node.js

    1938questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Electron

    199questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Electronが実行できない

解決済

回答 5

投稿

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

yuta0801

score 177

前提・実現したいこと

Electronを使用してアプリケーションを作成しています

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

main\.js:9
app\.on\('window-all-closed', function\(\) {
   \^

TypeError: Cannot read property 'on' of undefined
    at Object\.<anonymous> \(main\.js:9:4\)
    at Module\._compile \(module\.js:570:32\)
    at Object\.Module\._extensions\.\.js \(module\.js:579:10\)
    at Module\.load \(module\.js:487:32\)
    at tryModuleLoad \(module\.js:446:12\)
    at Function\.Module\._load \(module\.js:438:3\)
    at Module\.runMain \(module\.js:604:10\)
    at run \(bootstrap_node\.js:394:7\)
    at startup \(bootstrap_node\.js:149:9\)
    at bootstrap_node\.js:509:3

該当のソースコード

'use strict';

var electron = require\('electron'\);
var app = electron\.app;
var BrowserWindow = electron\.BrowserWindow;

var mainWindow = null;

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

app\.on\('ready', function\(\) {
  mainWindow = new BrowserWindow\({width: 800, height: 600}\);
  mainWindow\.loadURL\('file://' \+ __dirname \+ '/index\.html'\);

  mainWindow\.on\('closed', function\(\) {
    mainWindow = null;
  }\);
}\);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Read Us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>

補足情報\(言語/FW/ツール等のバージョンなど\)

nodejs v6\.9\.5
electron v1\.6\.2

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

+3

こうするとどうでしょうか?

'use strict';
const electron = require('electron');
const app = electron.app || require('app');
const BrowserWindow = electron.BrowserWindow || require('browser-window');
let mainWindow = null;

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

app.on('ready', function () {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadURL('file://' + __dirname + '/index.html');

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/17 18:12 編集

    module.js:471
    throw err;
    ^

    Error: Cannot find module 'app'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\programming\node\hash\main.js:3:29)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    と出てしまいます

    キャンセル

+2

手元で試してみたところ、そのままコピペで動作しました。

もしかしてコマンド打つ時、node mainのようにnodeを実行していないでしょうか?electron \.とelectronを実行しないとダメですよ。

スクリーンショット

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

自分も同じ現象でハマっていましたが、sudo npx electron ./srcを実行すれば、アプリが表示されました.

理由はわかっていません...
なんらかの権限を変更する必要がありそうな🤦‍♂️

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

check解決した方法

0

長期の放置すいません

原因はわかっていませんが、コマンドプロンプトをスタートから開くと発生しなく
エクスプローラーのファイルメニューから開くと発生するようです


追記

いまでもエラーが出るときと出ないときがあるのですが、いくつかわかったことがあるので追記します

グローバルインストールしたelectronコマンドを使いelectron .と実行するときに発生するので
npxyarn runやnpm scriptなどから間接的に実行すると回避できるようです

require.resolve('electron')で読み込んでるモジュールのパスを確認したところ
エラーが出る方はローカルにインストールしたelectron
エラーが出ない方はグローバルにインストールしたelectron
が読み込まれていました

また実行しているコマンドのパスは同じですがelectron --versionの出力も違います
エラーが出る方:v10.2.0
エラーが出ない方:v3.0.3

ちなみにそれぞれインストールしたelectronのバージョンは以下です
ローカル:1.8.2
グローバル:3.0.3

おそらく作業ディレクトリか何かが影響してローカル、グローバルが
逆に読み込まれたのが原因だと思いますが詳しくのところはわかっていません

試しにローカル、グローバルともに削除し、最新の3.0.3をインストールしましたが結果は変わりませんでした
(npm list -gではelectron@3.0.3と表示されるのにelectron -vだとv10.2.10と表示されるのはなぜだろう)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/08/18 08:33

    その2つのコマンドプロンプトに何か違いはありますか?
    たとえば、ひとつは管理者権限で開いていたりとか
    そういったことを質問に追記すれば何かしら糸口がつかめるかも

    ちなみに、コマンドプロンプトをスタートから開いたときと、エクスプローラーのファイルメニューから開いたときで、質問に書いてあるバージョンで検証したけども、こっちではそういう問題は発生しなかった

    いっそのこと、自分が打ったコマンドをメモりながら一から作業しなおして、それでも同じエラーが出てきたらメモしたコマンドをのせて質問を投稿とかしたほうがよさそう

    キャンセル

  • 2018/08/22 02:58

    長期間放置したのが原因で同じエラーが再現できなくなりました

    npm scriptやnpxから実行したときにはグローバルインストールされたelectronが使われ
    ファイルメニューから開いたものを使うとローカルにインストールされたものが使われていました
    `require.resolve('electron')`より

    環境の設定や、作業パスが影響しているのかもしれません

    キャンセル

  • 2018/08/23 03:13

    問題が再現できなくなっちゃったんじゃどうしようもないな
    適当にBA選ぶなりなんなりして質問を閉めちゃったほうがええんじゃない?

    キャンセル

  • 2018/08/23 12:28

    度々すいません。解決したと思い久しぶりに以前触っていたelectronを使っているアプリをためしに起動してみたのですが、解決したのはエクスプローラーから開いたときだけでした

    キャンセル

  • 2018/08/23 12:39 編集

    >解決したのはエクスプローラーから開いたときだけでした

    あなたは「コマンドプロンプトをスタートから開くと発生しなく、エクスプローラーのファイルメニューから開くと発生する」といった。
    今までにあなたが出していない情報がないのなら、「エクスプローラーのファイルメニューから開いた場合だけ質問文の該当エラーが発生する」ということではないだろうかね?
    そして、それが改善されたなら、問題が再現できなくなっちゃったということ。
    つまり、もう問題はないのではないだろうかね?(エラーの原因がわからないことを除けば)

    キャンセル

  • 2018/10/08 13:52

    そうですね。今でも特殊な環境(エディタ内臓のターミナルとか)だと同じエラーができるのですが、
    ひとまず原因の推測がついたのと、解決策がわかったのでこれ以上引きずるのもあれですし
    解答に追記して解決としようと思います。ありがとうございました。

    キャンセル

0

最新のドキュメントでは

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

ではなく

const {app, BrowserWindow} = require('electron')


みたいですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/17 19:22

    'use strict';
    const {app, BrowserWindow} = require('electron');

    let mainWindow = null;

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

    app.on('ready', function () {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function () {
    mainWindow = null;
    });
    });
    としても以下のようなエラーが出てしまいます
    main.js:6
    app.on('window-all-closed', function () {
    ^

    TypeError: Cannot read property 'on' of undefined
    at Object.<anonymous> (main.js:6:4)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

    キャンセル

関連した質問

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

  • Node.js

    1938questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Electron

    199questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。