electronでsqlite接続

実現したいこと

ElectronでSQLiteに接続をしてCRUDをしたいと思っています。

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

npm create electron-vite@latest
select:React
で作成したファイルにsqlite3をインポートして接続しようとしたところエラーが発生しています。

エラーメッセージ

error
1App threw an error during load
2(node:4832) UnhandledPromiseRejectionWarning: ReferenceError: __filename is not defined        
3(Use `electron --trace-warnings ...` to show where the warning was created)
4(node:4832) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

該当のソースコード

main.ts
1import { app, BrowserWindow, ipcMain } from 'electron'
2import { fileURLToPath } from 'node:url'
3import path from 'node:path'
4import sqlite3 from "sqlite3";
5
6const __filename = fileURLToPath(import.meta.url);
7const __dirname = path.dirname(__filename);
8const db = new sqlite3.Database(
9  path.join(process.cwd(), "todoDB.db")
10);
11
12ipcMain.handle("getTodos",async () => {
13  return new Promise((res,rej)=>{
14    db.all(
15      "SELECT * FROM todos ORDER BY created_at ASC",
16      (err,rows)=>{
17        if(err){
18          rej(err);
19          return;
20        }
21        const todos = rows.map((row:any)=>({
22          id: row.id,
23          title: row.title,
24          completed: row.completed === 1,
25          createdAt: row.created_at,
26        }))
27        res(todos)
28      }
29    )
30  })
31})
32
33
34
35process.env.APP_ROOT = path.join(__dirname, '..')
36
37export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
38export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
39
40process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
41  ? path.join(process.env.APP_ROOT, 'public')
42  : RENDERER_DIST
43
44let win: BrowserWindow | null = null
45
46function createWindow() {
47  win = new BrowserWindow({
48    width: 900,
49    height: 900,
50    webPreferences: {
51      preload: path.join(__dirname, 'preload.mjs'),
52    },
53  })
54
55  if (VITE_DEV_SERVER_URL) {
56    win.loadURL(VITE_DEV_SERVER_URL)
57  } else {
58    win.loadFile(path.join(RENDERER_DIST, 'index.html'))
59  }
60}
61
62app.whenReady().then(createWindow)
63
64app.on('window-all-closed', () => {
65  if (process.platform !== 'darwin') {
66    app.quit()
67    win = null
68  }
69})
70
71app.on('activate', () => {
72  if (BrowserWindow.getAllWindows().length === 0) {
73    createWindow()
74  }
75})
76

preload.ts
1import { ipcRenderer, contextBridge } from 'electron'
2
3contextBridge.exposeInMainWorld("api",{
4  getTodos: ()=>ipcRenderer.invoke("getTodos")
5})
6
7
8// --------- Expose some API to the Renderer process ---------
9contextBridge.exposeInMainWorld('ipcRenderer', {
10  on(...args: Parameters<typeof ipcRenderer.on>) {
11    const [channel, listener] = args
12    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
13  },
14  off(...args: Parameters<typeof ipcRenderer.off>) {
15    const [channel, ...omit] = args
16    return ipcRenderer.off(channel, ...omit)
17  },
18  send(...args: Parameters<typeof ipcRenderer.send>) {
19    const [channel, ...omit] = args
20    return ipcRenderer.send(channel, ...omit)
21  },
22  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
23    const [channel, ...omit] = args
24    return ipcRenderer.invoke(channel, ...omit)
25  },
26
27  // You can expose other APTs you need here.
28  // ...
29})
30