electron + sveltekit で、 起動時に __dirname is not defined と出る

Question

実現したいこと

electron + sveltekit でのデスクトップアプリで、メニューバーを自作（レイアウト等）したいです。

melt ui の Menubarを用いて作成しており、electron.cjsからメニューをインポート → {#each}でメニューを実装したいです。

発生している問題・分からないこと

electron.cjsで、

preload: path.join(__dirname, 'preload.cjs')

という風に実行すると、エラーが起きてメニューを読み込みたい部分での

import { Menu } from 'electron';
import { ipcRenderer } from 'electron';

などの electron との通信を行うようなものが使えなくなる

エラーの画像は↓

エラーメッセージ

app.js:16 ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require (chunk-UXIASGQL.js?v=14a85010:8:50)
    at index.js:21:34
handleError @ app.js:16
2index.js:4 Uncaught (in promise) ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require (chunk-UXIASGQL.js?v=14a85010:8:50)
    at index.js:21:34

該当のソースコード

// src/electron.cjs

const windowStateManager = require('electron-window-state');
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
const contextMenu = require('electron-context-menu');
const serve = require('electron-serve');
const path = require('path');

try {
	require('electron-reloader')(module);
} catch (e) {
	console.error(e);
}

const serveURL = serve({ directory: '.' });
const port = process.env.PORT || 5173;
const dev = !app.isPackaged;
let mainWindow;

function createWindow() {
	let windowState = windowStateManager({
		defaultWidth: 800,
		defaultHeight: 600,
	});

	const mainWindow = new BrowserWindow({
		backgroundColor: 'whitesmoke',
		titleBarStyle: 'hidden',
		autoHideMenuBar: false,
		trafficLightPosition: {
			x: 17,
			y: 32,
		},
		minHeight: 450,
		minWidth: 500,
		webPreferences: {
			enableRemoteModule: true,
			contextIsolation: true,
			nodeIntegration: false,
			spellcheck: false,
			devTools: dev,
			preload: path.join(__dirname, 'preload.cjs'),
		},
		x: windowState.x,
		y: windowState.y,
		width: windowState.width,
		height: windowState.height,
	});

	windowState.manage(mainWindow);

	mainWindow.once('ready-to-show', () => {
		mainWindow.show();
		mainWindow.focus();
	});

	mainWindow.on('close', () => {
		windowState.saveState(mainWindow);
	});

	return mainWindow;
}

ipcMain.on('close-window', () => {
	BrowserWindow.getFocusedWindow().close();
});

ipcMain.on('minimize-window', () => {
	BrowserWindow.getFocusedWindow().minimize();
});

ipcMain.on('maximize-window', () => {
	const currentWindow = BrowserWindow.getFocusedWindow();
	if (currentWindow.isMaximized()) {
		currentWindow.unmaximize();
	} else {
		currentWindow.maximize();
	}
});

contextMenu({
	showLookUpSelection: false,
	showSearchWithGoogle: false,
	showCopyImage: false,
	prepend: (defaultActions, params, browserWindow) => [
		{
			label: 'Make App 💻',
		},
	],
});

function loadVite(port) {
	mainWindow.loadURL(`http://localhost:${port}`).catch((e) => {
		console.log('Error loading URL, retrying', e);
		setTimeout(() => {
			loadVite(port);
		}, 200);
	});
}

function createMainWindow() {
	mainWindow = createWindow();
	mainWindow.once('close', () => {
		mainWindow = null;
	});

	if (dev) loadVite(port);
	else serveURL(mainWindow);
}

const template = [
	{
		label: 'File',
		submenu: [
			{ label: 'New', click: () => console.log('New File') },
			{ label: 'Open', click: () => console.log('Open File') },
			{ label: 'Save', click: () => console.log('Save File') },
			{ type: 'separator' },
			{ label: 'Exit', role: 'quit' }
		]
	},
	{
		label: 'Edit',
		submenu: [
			{ label: 'Undo', role: 'undo' },
			{ label: 'Redo', role: 'redo' },
			{ type: 'separator' },
			{ label: 'Cut', role: 'cut' },
			{ label: 'Copy', role: 'copy' },
			{ label: 'Paste', role: 'paste' }
		]
	}
]
app.on('ready', function () {
	const menu = Menu.buildFromTemplate(template)
	Menu.setApplicationMenu(menu)
	createMainWindow();
})

ipcMain.handle('get-menu', async (event) => {
	return template;
})

app.on('activate', () => {
	if (!mainWindow) {
		createMainWindow();
	}
});
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit();
});

ipcMain.on('to-main', (event, count) => {
	return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
});

// src/preload.cjs

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
	invoke: (channel, data) => ipcRenderer.invoke(channel, data),
	send: (channel, data) => ipcRenderer.send(channel, data),
	on: (channel, func) => {
		ipcRenderer.on(channel, (event, ...args) => func(...args));
	},
	sendSync: (channel, data) => {
		ipcRenderer.sendSync(channel, data);
	},
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

「referenceerror: __dirname is not defined electron」と調べると、多くは

// src/electron.cjs
webPreferences: {
			enableRemoteModule: true,
			contextIsolation: true,
			nodeIntegration: false,
			spellcheck: false,
			devTools: dev,
			preload: path.join(__dirname, 'preload.cjs'),
		},

の nodeIntegration を ture にして contextIsolation を false にするといいよと書いてあったのですが、そもそもこれを直しても error のままだったのと、本来 nodeIntegration はセキュリティ的に false がいいよと書いてあったので、どうすればいいのやら…って感じです。

補足

上記以外に必要なソースコードがあれば教えてください。