jsでmodule not foundエラーが出る

Question

前提

viteを使ってelectronをビルドして動かす環境です。レンダリングにはreactを採用していますが、エラーとは関係ないと思うので省きます。

実現したいこと

typescriptで書かれたコードをビルドしてjavascript(cjs)ベースに直して実行するときに、エラーが出る。ビルド後のファイルはdist/main以下に作成されます。

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

module not found :  ./constants/ipc.cjs

該当のソースコード

preload.ts

import {IPC} from "./constants/ipc"
//いろんなコード

constants/ipc.ts

export const IPC = {
//いろんなコード
}

ビルド後
preload.cjs

const o = require("./constants/ipc.cjs");
//いろんなこーど

constants/ipc.cjs

const n = {//いろんなこーど};
exports.IPC = n;

試したこと

変換後のフォーマット設定をcjsからmoduleに変えたが結果は変わらず。
ビルド前のipc.tsのexportの書き方を変えてみたり、こちらのフォーマットを変えてみたりしたが変わらず。

追記

main.tsの方でもipc.tsをimportしていたのですが、そちらでエラーが出ていないように見えたので確認のためにmain.ts内でimport後すぐにconsole.logでipcの中データを表示するようにしたら表示されました。なぜかpreload.tsからは読み込まれずにmain.tsからは読み込まれるというのが現状です。ビルド後のmain.cjsとpreload.cjsは同じ階層にあります。

補足情報（FW/ツールのバージョンなど）

vite:4.0.0
electron:22.0.0
react:18.2.0

Comments

[maisumakun]

preload.tsの「./constants.ipc」は、本当にこの通り書いているのですか？

[Sosupe1123]

失礼しました。./constants/ipcです。

Answer 1

https://github.com/electron/electron/issues/35587
https://www.electronjs.org/docs/latest/breaking-changes#default-changed-renderers-without-nodeintegration-true-are-sandboxed-by-default
githubにissueが立っていたので詳しくはそちらを参照してください。簡単に解説するとプリロードスクリプトを分割することはできないらしいです。
手法1：nodeIntegration: trueかssandbox: falseにする。ただしこれは公式では非推奨
手法2：preload.tsとmain.ts間の双方向IPC通信を使用し、main.tsからipc.tsの中身を取得してくる。

ipcRenderer.invoke("sendIPC).then((val) => {
    //ここでvalが使える.今回はipc.tsの中にはIPC通信に使うチャンネルの名前を定義してあるので、用途としては十分
});