CODEWITHSUNDEEP
javascriptnode.jselectron
Centric.
Centric.

Reputation: 67

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

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?

Upvotes: 2

Views: 2743

Answers (2)

Henrique Viana
Henrique Viana

Reputation: 680

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,
        }
    });
});

Upvotes: 4

Ala Eddine Menai
Ala Eddine Menai

Reputation: 2880

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.

Upvotes: 1

Related Questions