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

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

ただいまの
回答率

89.13%

electronでパッケージングして作成したアプリが動かない(エラー:Cannot find module)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,896

tama-

score 16

-------package.json修正しました、ディレクトリ構成図追加しました-------

electronでアプリケーションを作成しパッケージングを行ったのですが、パッケージングして作成されたexeファイルを開くと「Cannot find module」のエラーがでてアプリケーションが動かない状態になっています。
※Cannot find moduleのエラーは、コーディング中で使用しているモジュール「fs-extra」と「jquery」のふたつがエラーとして出ています。
エラーはデベロッパーツールで確認しています。

パッケージングには、npmで取得したelectron-packagerを使用しています。
使用コマンド:npm run pack:win(electron-packager ./src --platform=darwin,win32 --arch=x64 が実行される)

○環境
・os
windows10

・node:v10.14.0
・npm:6.4.1
・package.json↓

{
  "name": "img-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-sass": "node-sass -w --source-map true ./src/css/style.scss ./src/css/style.css",
    "start": "electron ./src",
    "pack:win": "build --win --x64"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs-extra": "^7.0.1",
    "jquery": "^3.3.1",
    "linq": "^3.1.1"
  },
  "devDependencies": {
    "electron": "^4.0.0",
    "electron-builder": "^20.38.4"
  },
  "build": {
    "appId": "com.example",
    "win": {
      "target": "nsis"
    },
    "directories": {
      "output": "dist"
    }
  }
}

○ディレクトリ構成図
assets
├win
└favicon.ico
└osx
└ImgUpload.icns
dist(ここにパッケージング後のデータを格納予定)
node_modules
└モジュールいろいろ
src
└index.js、package.jsonなど
package.json(説明書きしているjsonはこちらのファイルです。)
package-lock.json
yarn.lock

ローカルでnpm start コマンドで開いている時はエラーが発生せず、問題なく可動します。

fs-extra、jqueryのモジュールは元々ローカルインストールをしていましたが、
エラーが出たため試しにグローバルインストールを行ってみましたが結果は変わりませんでした。

私の調べた知識では、package.json内のdependenciesに記述しているモジュールは一緒にパッケージングされると思ったのですが、「fs-extra」と「jquery」のみCannot find moduleのエラーが発生してしまいます。。。

お力添えよろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

electron-packagerは、electron-builderにマージされていて、多分メンテされていないモジュールになっていると思います。(ごめんなさい、未確認です)

electron-builderで、パックも実行してくれるはずですので、

    "pack:win": "build --win --x64"
  "build": {
    "appId": "com.example",
    "win": {
      "target": "nsis"
    },
    "directories": {
      "output": "dist"
    }
  }

として、ビルド(npm run pack:win)してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/21 18:44 編集

    ご回答ありがとうございます!
    「electron-packagerは、electron-builderにマージ」の件初めて知りました、ありがとうございますm(_ _)m

    electron-packagerとelectron-builderをアンイストールしてelectron-builderのみ再インストールし、教えていただいた形でpackage.jsonを修正しコマンド入力しましたところ、以下のエラーがでました。

    「Error: Application entry file "index.js" in the "私のパス\ImgUpload\dist\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.」

    index.jsは別途作成する必要があるのでしょうか。
    ※ルートディレクトリにはmain.jsが存在し、アプリケーション用のindex.jsはsrcディレクトリ内に存在する形です。

    キャンセル

  • 2018/12/21 18:54

    ディレクトリ構成図を追加しました!

    キャンセル

  • 2018/12/21 19:11

    main.jsが、electron関係の実装にあたるのであれば、index.jsと記載されている部分("main")をmain.jsに書き換えれば良いはずです。もし、index.jsにelectron実装を含んでいるのであれば、src/index.jsで良いと思います。

    現時点で、electronに対応するための実装がないようであれば、その部分の追加が必要です。

    イメージとしては、electronのモジュールをロードして、
    それを利用して、専用ブラウザを起動し、アプリの実体に関連づけるような感じです。

    詳細は、一度調べてみてください。
    わからない部分があれば、改めて、electronの実装に関する質問をされるのが良いと思います( ´ ▽ ` )

    キャンセル

  • 2018/12/25 10:26

    お返事遅れてしまい申し訳ありませんm(_ _)m

    どうやら勘違いをしていたようで、今までrootディレクトリに必要なモジュールを置いていたこと、rootディレクトリのpackage.jsonを編集していたことが原因でしたm(_ _)m

    自信で組んだプログラムが置いてあるsrcディレクトリに必要なモジュールを起き、package.jsonを編集したことでビルドができるようになりました!

    この度はご助言ありがとうございました!!!!!

    キャンセル

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

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