CODEWITHSUNDEEP
javascriptnode.jselectron
Cynthia
Cynthia

Reputation: 181

BrowserWindow Not a Constructor or Undefined - Electron

I'm trying out Electron on my MacBook for the first time because I want an environment I can code a desktop application in. I was a programmer before I retired and used various languages but not much javascript.

I'm going through the online tutorials to try to create a little app that just opens another window. I have the main.js, index.js and index.html files set up. I'm struggling with a couple of errors and I think they have to do with the 'remote' call.

In index.js when I include:

const BrowserWindow = electron.remote.BrowserWindow

When main.js loads index.html I get the error:

index.js:3 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at index.js:3

When I take out 'remote' there is no error when main.js loads index.html, but when I try to use a button to open another window, I get this error:

index.js:10 Uncaught TypeError: BrowserWindow is not a constructor at HTMLButtonElement.<anonymous> (index.js:10) (anonymous) @ index.js:10

I've spent a couple of days reading online and I'm not able to figure this out. I am running electron on a MacBook. I would love some help on this. I've been reading about remote and rendering etc but I'm not sure what is happening exactly. Thanks!

Here are my files main.js

// Modules to control application life and create native browser window
//require('@electron/remote/main').initialize()

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
        nodeIntegration: true
      }
    })

   // and load the index.html of the app.
    mainWindow.loadFile('src/index.html')
    
   // Open the DevTools.
    mainWindow.webContents.openDevTools()
  }

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/css/add.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <div class="row">
      <div id="price-container">
          <p class="subtext">Current BTC USD</p>
          <h1 id="price">$9,503.21</h1>
      </div>
      <div id="goal-container">
          <p><img src="../assets/images/up.svg"><span id="targetPrice">Choose a Target Price</span></p>
      </div>
      <div id="right-container">
          <button id="notifyBtn">Notify me when..</button>
      </div>
  </div>

  <script src="index.js"></script>
  </body>
</html>

index.js

const electron = require('electron')
const path = require('path')
//const BrowserWindow = electron.remote.BrowserWindow
const BrowserWindow = electron.BrowserWindow

const notifyBtn = document.getElementById('notifyBtn')

notifyBtn.addEventListener('click', function (event) {
    const modalPath = path.join('file://', __dirname, 'add.html')
    let win = new BrowserWindow(
          {
            width: 400, height: 200,
            webPreferences: {
                nodeIntegration: true
            }
          }
        )
    win.on('close', function () { win = null })
    win.loadURL(modalPath)
    win.show()
  })

Upvotes: 0

Views: 3256

Answers (1)

Attila Gy&#233;n
Attila Gy&#233;n

Reputation: 46

I'm using MacBook too and I figured out how to open a new BrowserWindow when clicking on a button. You have to use the IPC from electron. In your .html when you have the button put a simple script at the end of the file as follows:

<body>
  <h1>Hello World!</h1>
  <button id=open>Open</button>
  
</body>
<script type="text/javascript">
  const electron = require('electron');
  const { ipcRenderer } = electron;

  document.getElementById('open').addEventListener('click', event => {
    ipcRenderer.send('main:add');
  });
</script>

then in your electron main file (for me it was an index.js file) put the following:

let addWindow;

ipcMain.on('main:add', event => {
  addWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  });
  addWindow.loadURL(`file://${__dirname}/index.html`);
  addWindow.webContents.openDevTools();
  addWindow.on('closed', () => {
    addWindow = null;
  });
});

and of course you have to define your .html file you want to open in a new window. (for me this is an index.html).

Feel free to include the JS into your html from a separate file. I put it inside the html to keep things simpler.

If you want to send back information use yourWindowNameInElectron.webContents.send('eventName') in the electron main file and ipcRenderer.on('eventName') in your html. Note that the event in the electron must be the same as the event name in the html.

Hope this will help you.

Upvotes: 1

Related Questions