window.require is not a function at Module./renderer.js

Question

When I run the App I get this error: TypeError: window.require is not a function at Module./renderer.js I delete window. from the line then I get another error Cannot find module 'fs' at webpackMissingModule

There are many answers on Stackoverflow, I tried all non of them work for me

Preload.js

const { ipcMain } = require("electron");
const sqlite3 = require("sqlite3");

const database = new sqlite3.Database("./public/db.sqlite3", (err) => {
if (err) console.error("Database opening error: ", err);
});

ipcMain.on("asynchronous-message", (event, arg) => {
 const sql = arg;
database.all(sql, (err, rows) => {
event.reply("asynchronous-reply", (err && err.message) || rows);
});
});

Renderer.js

const electron = window.require("electron");
const { ipcRenderer } = electron;

export default function send(sql) {
return new Promise((resolve) => {
ipcRenderer.once("asynchronous-reply", (_, arg) => {
  resolve(arg);
});
ipcRenderer.send("asynchronous-message", sql);
});
}

Electron.js

const electron = require("electron");

require("../src/message-control/main");

const { app } = electron;
const { BrowserWindow } = electron;

const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({
frame: false,
webPreferences: {
  preload: path.join(__dirname, "../src/message-control/preload.js"),
},
});

ipcMain.on("set-title", (event, title) => {
const webContents = event.sender;
const win = BrowserWindow.fromWebContents(webContents);
win.setTitle(title);
});

mainWindow.loadURL(
isDev
  ? "http://localhost:3000"
  : `file://${path.join(__dirname, "../build/index.html")}`
);
mainWindow.on("closed", () => {
mainWindow = null;
});
}

app.on("ready", createWindow);

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

app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});