How can I send data from my main.js to my index.html (Electron)

Question

I am a complete beginner to JavaScript and Electron just so you know.

I think I've looked most places, and I haven't found a thing.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>??</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <button id="get-data" type="submit">Get Data</button>
    </div>

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

</html>

main.js

const { app, BrowserWindow } = require("electron");
const ipc = require("electron").ipcMain;

app.whenReady().then(() => {
    const window = new BrowserWindow({
        "center": true,
        "width": 500,
        "height": 800,
        "webPreferences": {
            "nodeIntegration": true
        }
    });
    window.loadFile("index.html");
});

ipc.on("uhhm", event => {
    event.sender.send("ok", "Hello World!");
});

script.js

const ipc = require("electron").ipcRenderer;
const getDataBtn = document.getElementById("get-data");

getDataBtn.addEventListener("click", () => {
    ipc.send("uhhm");
    ipc.once("ok", data => {
        getDataBtn.innerHTML = "Moving On... " + data;
    });
});

I get this error:

Uncaught ReferenceError: require is not defined
    at script.js:1

IDK what to do

Have any suggestions?

Does this answer your question? [communication between 2 browser windows in electron](https://stackoverflow.com/questions/40251411/communication-between-2-browser-windows-in-electron) — superhawk610, Jul 01 '21 at 21:51

score 3 · Answer 1 · answered Jul 01 '21 at 21:55

3

if you are using a >= 5 version of Electron, you need to enable the nodeIntegration and contextIsolation parameters as follows:

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

answered Jul 01 '21 at 21:55

Henrique Viana

645
4
12

Yesss thanks, [that](https://stackoverflow.com/questions/68217236/how-can-i-send-data-from-my-main-js-to-my-index-html-electron#:~:text=contextIsolation:%20false,) worked – Centric. Jul 01 '21 at 22:00

score 0 · Answer 2 · answered Jul 01 '21 at 21:53

I had that issue when I worked for a while with Electron Framework, where I need IPC communication between a renderer process and the main process. The renderer process sits in an HTML file between script tags and generates the same error.

const {ipcRenderer} = require('electron')
//throws the Uncaught ReferenceError: require is not defined

In your case :


const ipc = require("electron").ipcRenderer;

You must to work around that by specifying Node.js integration as true when the browser window (where this HTML file is embedded) was originally created in the main process.

function createWindow() {

    // Create a new window
   const window = new BrowserWindow({
        width: 300,
        height: 200,

        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true
        }
})}

That solved the issue for me. The solution was proposed here.

How can I send data from my main.js to my index.html (Electron)

index.html

main.js

script.js

I get this error:

2 Answers2