In my electron projects I'm receiving the following TypeError while trying to send and receive data from different windows.

My Imports

const electron = require("electron");
const url = require("url");
const path = require("path");
const { Menu } = require("electron/main");
const { webContents } = require("electron");
const { app, BrowserWindow, ipcMain } = require("electron");

Place of Error

Send data

<script>
  const electron = require("electron");
  const { ipcRenderer } = electron;

  const form = document.querySelector("form");
  form.addEventListener("submit", submitForm);

  function submitForm(e) {
    e.preventDefault();
    const item = document.querySelector("#item").value;
    ipcRenderer.send("item:add", item);
  }
</script>

Receive data

// Catch item:add
ipcMain.on("item:add", function (e, item) {
  console.log(item);
  mainWindow.webContents.send("item:add", item);
  addWindow.close();
});

In my electron projects I'm receiving the following TypeError while trying to send and receive data from different windows.

My Imports

const electron = require("electron");
const url = require("url");
const path = require("path");
const { Menu } = require("electron/main");
const { webContents } = require("electron");
const { app, BrowserWindow, ipcMain } = require("electron");

Place of Error

Send data

<script>
  const electron = require("electron");
  const { ipcRenderer } = electron;

  const form = document.querySelector("form");
  form.addEventListener("submit", submitForm);

  function submitForm(e) {
    e.preventDefault();
    const item = document.querySelector("#item").value;
    ipcRenderer.send("item:add", item);
  }
</script>

Receive data

// Catch item:add
ipcMain.on("item:add", function (e, item) {
  console.log(item);
  mainWindow.webContents.send("item:add", item);
  addWindow.close();
});

• javascript
• html
• electron

• well, what is mainWindow set to? that's not shown in the code – pushkin Commented Oct 8, 2020 at 15:32

3 Answers 3

I figured out where my error was lying, so I'm answering my own question.

It seems it I was trying to send data that hadn't fully been received, thus I had to wait for my page to load and then send the data as follows.

ipcMain.on("item:add", function (e, item) {
        mainWindow.webContents.on("did-finish-load", () => {
            mainWindow.webContents.send("item:add", item);
        });
});

For me it was a scope error, I had a let mainWindowat the module level but in the createWindow function I had the line async function createWindow() { const mainWindow = new BrowserWindow

In effect I had two mainWindow instances and the first was null and the second was within the scope of the createWindow function.

I deleted the const and the scope was corrected and the problem resolved.

corrected code: async function createWindow() { mainWindow = new BrowserWindow

My noob error :-)

Try something like this:

import { remote } from 'electron' // ES6
const { remote } = require('electron') // ES5


// stuff
const webContents = remote.getCurrentWindow().webContents

// Do something with webContents
webContents.send("item:add", item);