ElectronのコードをCommonJSからES Modulesに書き換えたい・Electronのモジュールがimportできない

Question

解決したいこと

Electronのモジュールがimportできない

Electronのメインプロセス側のコードもES Modulesで統一しようとした際にこの問題が起こりました。
解決方法を教えて下さい。

発生している問題・エラー

importでElectronのモジュールをロード

'use strict'

// モジュールロード
import pkg from 'electron';
const { app, Menu, BrowserWindow, dialog } = pkg;

// 中身を確認
console.log(pkg)
console.log(app)
console.log(Menu)

実行結果

// pkg
// /Users/~ 省略 ~/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron 
// app
// undefined
// Menu
// undefined

// UnhandledPromiseRejectionWarning: TypeError: Cannot read properties of undefined (reading 'buildFromTemplate')

• pkgはElectronのモジュールがある場所のファイルパスを返している
• appやMenuなどはundefinedを返す
  • なのでそれ以降でappやMenuのモジュール内の関数などを使おうとするとUnhandledPromiseRejectionWarning: TypeError: Cannot read properties of undefined (reading '') のエラーが出る

自分で試したこと

この記事に沿ってES Modulesに置き換えました。

https://qiita.com/Satachito/items/990b1a8d8c1a551037e6

• package.jsonに"type" : "modules"を追加
• main.cjsを作りpackage.jsonに"main" : "main.cjs"と修正
  • main.cjsは以下コード

global.require = require
global.__dirname = __dirname
import( './main.js' )

• package.jsonに"asar": falseを追加
• 既存のコードをES Modulesに書き換え

const app = pkg.appのように書き換えても時効結果は同じundefinedでした

調べてもめぼしい情報が見つけられなくて困っています。
よろしくお願いします。

Answer 1

解決方法(案)

importの方法を以下のように修正してみてください。

import { app, Menu, BrowserWindow, dialog }  from 'electron';

...中略
// 以下のように呼び出せます
app.on('ready', async () => {

...

参考情報

• electron公式のサンプルのリポジトリのmain.ts
  以下公式のリポジトリです。typescriptで記述されていますが、よければ参考にしてみてください。
  https://github.com/electron/electron-quick-start-typescript/blob/master/src/main.ts

• zenn
  このあたりも参考になるかもしれません。
  https://zenn.dev/yodaka/articles/596f441acf1cf3

Comments

[dimyas]

import { app, Menu, BrowserWindow, dialog } from 'electron';

...中略
// 以下のように呼び出せます
console.log(app) // undefined
app.on('ready', async () => {

...

になるので`on.('ready' , () =>{})`が使えないですね…