Sysrigar

electron-builderで「Error: Cannot find module 」が出る場合につい

2019年11月23日 カテゴリー：Web系, 技術系 コメント : 0

０，目次

1. はじめに
2. 対処
3. 参考文献

１，はじめに

electron-builderを用いて、Webアプリのビルドを行おうとしたところ、エラーが発生しました。

エラーメッセージとして以下が表示されました。

R:\test\electron-quick-start>node electron-builder
internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'R:\test\electron-quick-start\electron-builder'
[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)[39m
[90m    at Function.Module._load (internal/modules/cjs/loader.js:687:27)[39m
[90m    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)[39m
[90m    at internal/main/run_main_module.js:17:11[39m {
  code: [32m'MODULE_NOT_FOUND'[39m,
  requireStack: []
}

R:\test\electron-quick-start>

この問題への対処を行います。

２，対処

軽い気持ちでelectronに手を出してみたら、なんかやばいことになったので記事にした。あれだね、npmでbuilderインストールする時にグローバルの指定が必要だったかもだねたぶん / electron-builderで「Error: Cannot find module 」が出る場合につい https://t.co/vEnYg1WcY5 #sysrigar @jskny_twより

— Jskny (@jskny_tw) November 23, 2019

（１）根本原因

本件エラーは electron-builder の導入先への指定がおかしいため生じていました。

導入した際の フォルダ構造は以下のとおりです。

• electron-quick-start
  • 作成したWeb Appのコードとか
  • node_modules
    • .bin
    • electron
    • electron-builder

（２）対処法・解決策

正確なパスを指定してビルドを行います。

今回の例ですと「node_modules」の「.bin」ディレクトリの中にbuilderが入っていますので、以下のコマンドを実行します。

.\node_modules\.bin\electron-builder.cmd

実行すると、以下のような出力が表示されました。

PS G:\test\electron-quick-start> .\node_modules\.bin\electron-builder.cmd
  electron-builder  version=21.2.0 os=10.0.18363
  writing effective config  file=dist\builder-effective-config.yaml
  packaging       platform=win32 arch=x64 electron=7.1.2 appOutDir=dist\win-unpacked
  downloading     url=https://github.com/electron/electron/releases/download/v7.1.2/electron-v7.1.2-win32-x64.zip size=63 MB parts=8
  downloaded      url=https://github.com/electron/electron/releases/download/v7.1.2/electron-v7.1.2-win32-x64.zip duration=2m17.533s
  default Electron icon is used  reason=application icon is not set
  downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z size=5.6 MB parts=1
  downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z duration=11.532s
  building        target=nsis file=dist\electron-quick-start Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false
  downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3.2/nsis-3.0.3.2.7z size=1.4 MB parts=1
  downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3.2/nsis-3.0.3.2.7z duration=15.97s
  downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1
  downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=4.322s
  building block map  blockMapFile=dist\electron-quick-start Setup 1.0.0.exe.blockmap
PS G:\test\electron-quick-start>

実行完了後、以下のディレクトリやファイルが作成されました。

• electron-quick-start
  • 作成したWeb Appのコードとか
  • dist
    • win-unpacked
      • electron-quick-start.exe
    • electron-quick-start Setup 1.0.0.exe
  • node_modules
    • .bin
    • electron
    • electron-builder

作成された「electron-quick-start Setup 1.0.0.exe」を実行すると、Windows環境に作成したアプリのインストールが行われました。

起動すると、Webアプリがデスクトップアプリとして動作しました。

３，参考文献

• Electronでアプリケーションを一つ作った時のメモ すきせか
• Command Line Interface (CLI) – electron-builder
• 【JS/Electron】electron-builderでElectronアプリをビルドする | しきゆらの備忘録

Tag : javascript, nodejs, web 作成者 : jskny