electronでレンダラープロセスとメインプロセスの連携に失敗する　「cannot read property 'BrowserWindow' of undefined」

初めてMacOSで動作するデスクトップアプリを開発する者です。
下記画像のようなボタンをクリックすると新しいウィンドウが立ち上がるシンプルなサンプルプログラムを実装しましたが、
ボタンをクリックしても

「BrowserWindow of undefined」

のエラーで思ったとおりにウィンドウが立ち上がらなくて困っています。

以下にそれぞれのバージョンとコードを掲載しましたので、もし詳しい方がいましたら、原因をご教授いただけますでしょうか。

よろしくお願いいたします。

electron
node --version
v15.12.0

electron --version
v12.0.2

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sample App</title>
7</head>
8<body>
9  <div class="container">
10    <p id="msg">please click button.</p>
11    <button class="btn btn-primary"onclick="doit()">
12      Click
13    </button>
14  </div>
15  <script>
16    const BrowserWindow = window.remote.BrowserWindow;
17    function doit() {
18      let win = new BrowserWindow({
19        width: 400,
20        height: 300,
21      });
22      win.loadFile('index.html');
23      document.querySelector('#msg').textContent = 'Create new window!';
24    }
25  </script>
26</body>
27</html>
28
29
30

index.js

javascript
1const { app, Menu, BrowserWindow }  = require('electron');
2const path = require('path');
3
4function createWindow () {
5    win = new BrowserWindow({
6      width: 400,
7      height: 300,
8      webPreferences: {
9        enableRemoteModule: true,
10        preload: path.join(app.getAppPath(), 'preload.js')
11      }
12    });
13    win.webContents.openDevTools();
14    win.loadFile('index.html');
15  }
16  
17app.whenReady().then(createWindow);

###preload.js

javascript
1const { remote } = require('electron');
2window.remote = remote;

package.json

json
1{
2  "name": "example_app",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "start": "electron ."
8  },
9  "author": "",
10  "license": "MIT",
11  "dependencies": {
12    "electron": "^12.0.2"
13  }
14}