BrowserWindow Undefined

JavaScript
#1

I am building a desktop application using Electron.js as the frontend and Python as the backend.

When i click a button, it’s meant to open a new window but I keep getting the error below:

mainWin.js:3 Uncaught TypeError: Cannot read property ‘BrowserWindow’ of undefined

I am stuck. please any advice?

My main process (index.js) is below:

//creating the app property
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path');



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

  // and load the index.html of the app.
  win.loadFile('ParentWin/Winindex.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  var menu = Menu.buildFromTemplate([{
    label: 'Menu',
      submenu: [
        {label: 'Check for Update'},
        {label: 'Adjust Notification Value'},
        {
          type:'separator'
        },
        
        {
          label: 'Exit',
          click() {
              app.quit()
          }
    }]

  },

  {label: 'Tools',
  submenu:[
    {label:'Reload'}
  ]}
  
])

  Menu.setApplicationMenu(menu);
}

// 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)

// 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', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 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()
  }
})

while the parent window (mainWin.js) is below:

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


const submit = document.getElementById('submit_button')

submit.addEventListener('click', function(event) {
    const modalPath = path.join('DCN/dc.html')
    let win = new BrowserWindow({ frame: true, transparent: false, alwaysOnTop: true, width: 400, height: 200})
    win.on('close', function() { win = null })
    win.loadFile(modalPath)
    win.show()
})
#2

Hello there,

I think the error is quite helpful:

  • electron.remote on line 3 does not have a property BrowserWindow

Even looking at the docs, the BrowserWindow object is a direct export from the electron package.

So, you managed to do it in your index.js file. Now, you need to do the same in mainWin.js

Hope this helps

1 Like
#3

Thanks Sky…

I am new to programming and this is my first project that solves a repetitive task at work.

So what needs to change in mainWin.js?

#4

Here is the most relevant part of the Electron Docs. The only difference, is the name of the files, but they are still very similar.

Remember, the error message is saying that BrowserWindow does not exist in electron.remote. You have already correctly used it before. So, do the same in this case.

Hope this helps

1 Like
#5

Thanks Sky020… I was enable to create a child window from the index.js (main process) but what i want to achieve is creating a child window using an eventListener… See Code below:

submit.addEventListener('click', function(event) {
    
    const modalPath = path.join('DCN/dc.html')
    let win = new BrowserWindow ({ width: 400, height: 200})
    win.on('close', function() { win = true; })
    win.loadFile(modalPath)
    win.show()
 
});

But nothing works. I no longer get

mainWin.js:3 Uncaught TypeError: Cannot read property ‘BrowserWindow’ of undefined

But nothing happens…

#6

Have you changed the third line of mainWin.js?

const BrowserWindow = electron.remote.BrowserWindow;
#7

Truth be told… I don’t know what to modify… I am going through the docs to understand the module better.

#8

I’ve found this in a tutorial video since I had the exact same issue, hope it helps!

If you’re at 28:36 and stuck because of “Cannot read property ‘BrowserWindow’ of undefined” when you try to run the code.

In index.js change:

const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

to:

const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})

As of a couple of days ago on Electron 10.0, remote is disabled by default. Spent hours trying to figure out why my code didn’t work :confused:

1 Like
#9

Thanks :slight_smile: @frankline

#10

This solved my doubt! Thanks a bunch :slight_smile:

#11