electron unable to load preload のエラー回避

状況

mysql2を使用するためにpreloadでipc通信の定義?をしたい
electron+react+typescript+viteのため、構成が複雑
package.jsonでは"type": "module",を設定している

エラー内容

import export まわりでエラーが発生している模様

解決方法

拡張子:preload.ts => preload.mts

ESM のプリロードスクリプトは拡張子が .mjs でなければなりません

プリロードスクリプトは "type": "module" フィールドを無視するため、ESM のプリロード スクリプトでは .mjs ファイル拡張子を使用 しなければなりません。

ESM のプリロードスクリプトは拡張子が .mjs でなければなりません

esmoduleとして使うには、preload.mjsとしなきゃならない
mainスクリプトは、.jsでいいのにね

サンドボックスを無効化

import path from "node:path";
import { dirname } from "path";
import { fileURLToPath } from "url";

...

    webPreferences: {
      preload: path.join(__dirname, "preload.mjs"),
      nodeIntegration: true,
    },

nodeIntegration: trueの場合はサンドボックスも無効になります

nodeIntegration: trueの場合はサンドボックスも無効になります

サンドボックス化されたプリロードスクリプトは、ESM のコンテキストがないプレーンな JavaScript として実行されます。 外部モジュールを使用する必要がある場合は、プリロードのコードにバンドラを使用することをお勧めします。 electron API の読み込みは、引き続き require('electron') を介して行われます。

サンドボックス化されたプリロードスクリプトは ESM インポートを使用できません

*サンドボックス有効でもバンドラーを使えば、モジュールを使うことはできそう

Q.なぜサンドボックス無効化にsandbox: falseを使わないのか
A.nodeIntegration: trueを使っている人が多いのでそれにならったが理由は分からず。


いいなと思ったら応援しよう!