Cannot read property on of undefined. Electron BrowserWindow object - ecmascript-6

Question

I am trying to learn Electron, but am running into an issue with the Pluralsight tutorial I am using. I installed the 'electron-prebuilt' module. I get an error everytime I run "npm start". The window opens as expected, but the error message that pops up in a dialog box kind of ruins the whole thing. Here is the error:
Uncaught Exception:
TypeError: Cannot read property 'on' of undefined at Object.
There's more to the long error message but it won't let me copy and paste, and the rest of the error just refers to the location of the supposed problem on line 14 of my main.js code. Here is my main.js file:
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
app.on('ready', _ => {
mainWindow = new BrowserWindow({
height: 400,
width: 400
})
})
mainWindow.on('closed', _ => {
console.log('closed')
mainWindow = null
})
It's indicating that the BrowserWindow object I created doesn't have an "on" method, but I know this to be false per the Electron documentation:
https://electronjs.org/docs/api/browser-window
So I'm thinking that the value of mainWindow just isn't being set. I could try instantiating mainWindow with a new BrowserWindow object at the time I declare it, but I get an error message if I try that indicating that I can only instantiate BrowserWindow objects in ready functions.

Answer 1

you have to understand how callbacks work in node.js, callbacks are executed asynchronously, before app.onready fires, mainWindow is still undefined hence the declaration of let mainWindow assigns undefined to mainWindow, take mainWindow.on("closed", ....) into the app.on("ready") event handler. Do this
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
app.on('ready', _ => {
mainWindow = new BrowserWindow({
height: 400,
width: 400
})
mainWindow.on('closed', _ => {
console.log('closed')
mainWindow = null
})
})

Answer 2

This error also occurs if you are just calling node on your electron script instead of electron. Your npm start script should be calling npx electron . instead, so try running npx electron . or npx electron main.js first. See this relevant issue here:
https://github.com/electron/electron/issues/7475