ElectronでIPC通信を実装したらrequire is not definedとエラーが発生した

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ドットインストール講座でElectronを勉強している最中です。
https://dotinstall.com/lessons/basic_electron/36214

settings.htmlのラジオボタンでユーザーが色を選択し、それを取得し、IPC通信でindex.jsに送信し、index.htmlで背景色が変わる機能を作ろうと考えていました。

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

エラーメッセージ
Uncaught ReferenceError: require is not defined
    at index.html:25
Uncaught ReferenceError: require is not defined
    at settings.html:38

該当のソースコード

index.html:25
  const electron = require('electron');
  const ipcRenderer = electron.ipcRenderer;
settings.html:38
  const electron = require('electron');
  const ipcRenderer = electron.ipcRenderer;   

また、上記以外のIPC通信に関するコードは以下の通りです。

index.js 13
const ipcMain = electron.ipcMain;

index.js 30
ipcMain.on('settings_changed', function(event, color) {
  mainWindow.webContents.send('set_bgcolor', color);
});

index.html 43
  ipcRenderer.on('set_bgcolor', function(event, color) {
    document.body.style.backgroundColor = color;
  });

settings.html 41
let colors = document.getElementsByName('colors');
  for (let i = 0; i < colors.length; i++) {
    colors[i].addEventListener('change', function() {
      let color = this.value;
      // console.log(color);
      // settings.html -> index.js -> index.html
      // ipc
      ipcRenderer.send('settings_changed', color);
    });
  }

試したこと

npm install require

6 packages are looking for funding
  run `npm fund` for details

found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit fix

npm WARN MyApp_copy@1.0.0 No description
npm WARN MyApp_copy@1.0.0 No repository field.

up to date in 0.441s

6 packages are looking for funding
  run `npm fund` for details

fixed 0 of 2 vulnerabilities in 95 scanned packages
  2 vulnerabilities required manual review and could not be updated

npm fund

MyApp_copy@1.0.0
├─┬ https://opencollective.com/core-js
│ └── core-js@3.13.1
├─┬ https://github.com/sponsors/sindresorhus
│ └── serialize-error@7.0.1, escape-string-regexp@4.0.0, type-fest@0.13.1, get-stream@5.2.0
└─┬ https://github.com/sponsors/ljharb
  └── globalthis@1.0.2

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

index.jsでもrequire('electron')を使ってたいたが特に問題なかった

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const dialog = electron.dialog;
const ipcMain = electron.ipcMain;

package.jsonより

  "devDependencies": {
    "electron": "^13.0.1"
  },
  "dependencies": {
    "require": "^2.4.20"
  }

=============追記==============

ipc通信の書き方に関する書き方が古いというご意見をいただいたので、次の記事を参考にしてもやはりエラーが出てしまいます。
https://qiita.com/pochman/items/62de713a014dcacbad68

以下を確認しても、書き方に特に問題はないように見える
https://github.com/electron/electron/blob/main/docs/api/ipc-main.md
https://github.com/electron/electron/blob/main/docs/api/ipc-renderer.md

###発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'send' of undefined at HTMLInputElement.<anonymous> (settings.html:45)

###該当のソースコード

index.js

const { app, BrowserWindow,Menu,dialog,ipcMain } = require('electron');

ipcMain.on('settings_changed', (event, ...args)=> {
  mainWindow.webContents.send('set_bgcolor', color);
});

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 600, 
    height: 400,
    webPreferences: { 
      nodeIntegration: false,
      contextIsolation: true,
      preload: __dirname + '/preload.js'
    },
  });

preload.js

const { contextBridge, ipcRenderer} = require("electron");
contextBridge.exposeInMainWorld(
  "api", {
    send: (channel, data) => {//rendererからの送信用//
        ipcRenderer.send(channel, data);            
      },
    on: (channel, func) => { //rendererでの受信用, funcはコールバック関数//
        ipcRenderer.on(channel, (event,...args) => func(...args));
    }
  }
);

index.html

    window.api.on('set_bgcolor', (color)=>{
      document.body.style.backgroundColor = color;
    });//receive //ここで何か表記ミスした

settings.html

  <script >
  'use strict';
    
  let colors = document.getElementsByName('colors');
  for (let i = 0; i < colors.length; i++) {
    colors[i].addEventListener('change', function() {
      let color = this.value;
      // console.log(color);
      // settings.html -> index.js -> index.html
      // ipc
      window.api.send('settings_changed', color);
    });
  }
  </script>

package.json

  "devDependencies": {
    "electron": "v6.14.13"
  },
  "dependencies": {
    "require": "^6.14.13"
  }

Answer 1

ドットインストールは昨年の大改編に対応していないのでお勧めできないです！　（質問もクローズされていました）
同じエラーは多くのところで質問されているので、ヒントとしては、他の英語のサイトやUdemyの講座でElectronを学ぶのがお勧めです。もしわかったら他の方の質問にも答えてあげてくださいね。

Answer 2

IPC通信の書き方が変わっているため、動かないのかと…

https://dotinstall.com/lessons/basic_electron/36214
のURLでぐぐったところバージョンは下記とでてインストールしているバージョンと比べて
かなり古いバージョンのようです

まとめ. このレッスンで解説されている処理の概要は以下のとおりです。 ipc通信の設定; 動作確認. このレッスンではNode.js v4.2.6 / Electron v0.36.7 を使用しています。 質問と回答 (0). この動画に関する、質問と回答はありません。

なので、該当バージョンに変更するか、
新しい方法に書き換えるかですね

これ有料会員じゃないとバージョン出ないんですね
他に視聴したい講座があるならいいんですが、このためだけに払ったりするひといるかもなのでかなり不親切ですよね

追記

こちらの環境だと、記載のエラーは再現しなかったのですが、使っているバージョンはそもそも記載の方法は対応しているんですかね？
（一部console.logで書き換えたので、完全な再現ではないのですが）
https://www.electronjs.org/docs/tutorial/context-isolation/history

electron -v
v12.0.0

あと、手元でやったかぎりはcolorがおかしいきが…

ipcMain.on('settings_changed', (event, ...args)=> {
  mainWindow.webContents.send('set_bgcolor', color);
});

Comments

[bishopfunc]

ご回答ありがとうございます！
最新の書き方について調べ試してみたのですが、違うエラーが出ました...
もし差し支えなければご確認いただければ幸いです。