Electron:Uncaught ReferenceError: require is not definedと表示される

Question

前提・実現したいこと

Electronでデスクトップアプリを作ろうとしています。
単純な画面の起動は成功したのですが、以下のような事をやろうとすると、
Errorが発生してしまい実現に至っていません。
すみませんが解決策がありましたら教えて頂けないでしょうか。

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

Uncaught ReferenceError: require is not defined

RendererProcessでHTML側でButtonを押したらMainProcess側と通信を行い、
データを取得して表示をする、という事を作り方かったのですが、
ElectronのipcRendererをコードに記載すると上記Errorが出てしまい実行出来ませんでした。

ブラウザなのにrequireがあるのでErrorを吐いていると思っているので、
WebPack側の設定の問題のような気はしているのですが、ググり切れませんでした。

該当のソースコード

MainProcess

import * as Electron from "electron";
import { req, ClassDB } from "../module/index";
import * as path from "path";

let mainWindow: Electron.BrowserWindow | null = null;

Electron.app.on("ready", () => {
  mainWindow = new Electron.BrowserWindow({ height: 800, width: 1000, minWidth: 1000, autoHideMenuBar: true, center: true });
  mainWindow.loadURL("file://" + path.join(__dirname, "html", "index.html"));
  mainWindow.on("close", () => {
    mainWindow = null;
  })
});

Electron.ipcMain.on("updateButton", (async (event: Electron.IpcMainEvent) => {
  const url: string = "********";
  const mainDb = new ClassDB();
  await mainDb.loadDatabase();
  const res = await req.get(url);
  await mainDb.deleteData({});
  await mainDb.addData(res);
  const data = await mainDb.findData({});
  const str: string = data.join("");
  event.returnValue(str);
}));

RendererProcess

import { ipcRenderer } from "electron";
window.document.getElementById("updateButton")!.onclick = (() => {
  const value = ipcRenderer.sendSync("updateButton");
  console.log(value);
});

webpack.config.ts

import * as webpack from "webpack";
import * as path from "path";

const main: webpack.Configuration = {
  mode: "development",
  target: "electron-main",
  entry: path.join(__dirname, "src", "app", "app"),
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  },
  node: {
    __dirname: false,
    __filename: false
  },
  module: {
    rules: [{
      test: /.ts?$/,
      include: [path.resolve(__dirname, "src")],
      exclude: [path.resolve(__dirname, "node_modules")],
      loader: "ts-loader",
    }]
  },
  resolve: { extensions: [".js", ".ts"] },
};

const renderer: webpack.Configuration = {
  mode: "development",
  target: "electron-renderer",
  entry: path.join(__dirname, "src", "renderer", "index"),
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: { extensions: [".json", ".js", ".jsx", ".css", ".ts", ".tsx"] },
  module: {
    rules: [{
      test: /.(tsx|ts)$/,
      use: ["ts-loader"],
      include: [
        path.resolve(__dirname, "src"),
        path.resolve(__dirname, "node_modules"),
      ],
    }, {
      test: /.html?$/,
      loader: "html-loader",
    }, {
      test: /.css?$/,
      loader: "css-loader"
    }]
  },
};

module.exports = [main, renderer];

補足情報

現在の環境でインストールしているModuleは以下の通りです。

  "devDependencies": {
    "@types/nedb": "^1.8.9",
    "@types/request": "^2.48.3",
    "@types/webpack": "^4.39.7",
    "electron": "^7.0.0",
    "electron-packager": "^14.1.0",
    "nedb": "^1.8.0",
    "request": "^2.88.0",
    "ts-loader": "^6.2.1",
    "ts-node": "^8.4.1",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }

Answer 1

自己解決致しました。
Main Process側でElectron.Browsewindowsを呼ぶ際に、
以下の通りnodeIntegration: trueを追加する事で解決しました。
ご確認頂いた方々、ありがとうございました。

    this.mainWindow = new BrowserWindow({
      width: 800,
      height: 400,
      webPreferences: {
        nodeIntegration: true,
      }
    });