javascriptnpmelectrontypeerror

Sending Electron window data but getting error


Hi I'm trying to convert my project from a web browser to a GUI based app with electron and I'm following this video to start my project he is using yarn but I use npm 9.2.0

At first I was not getting anything from the button when I pressed it but I saw on a comment that I could try changing

webPreferences:{
    nodeIntegration: true,
}

to

webPreferences:{
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true,
}

and then I got something ... an error -_-

here is my code for now

gui.js

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

let leftWindow = null;
let rightWindow = null;

const createWindows = (win, page) => {
    win = new BrowserWindow({
        width: 1024,
        height: 600,
        resizable: false,
        fullscreen: true,
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        },
    });
    win.loadFile(page)
};

app.whenReady().then(() => {
    //createWindows(leftWindow, "dash.html");
    createWindows(rightWindow, "controls.html");
});

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin') {
        app.quit()
    }
})

ipcMain.on('send', (event, data) => {
    const randomStr = data + Math.random().toString(36).substring(2, 5)
    rightWindow.webContents.send('receive', randomStr)
})

render.js

const ipcRenderer = require("electron").ipcRenderer;
const test = () => {
    ipcRenderer.send("send", document.querySelector(".keyWord").value);
};

ipcRenderer.on("receive", (event, data) => {
    alert(data);
    const tempTag = document.querySelector("#temp");
    tempTag.innerText = data;
});

controls.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Controls</title>
        <script defer src="render.js"></script>
        <link rel="stylesheet" href="./public/styles.css" />
    </head>
    <body>
        <div id="content">
            <input type="text" class="keyWord" placeholder="Enter Data">
            <button onclick="test()">Test</button>
            <h1 id="temp">Random String</h1>
        </div>
       <script type="text/jsx" src="./public/controlApp.jsx"></script>
    </body>
</html>

Solution

  • Ok following @Arkellys and went on the links I didn't understand a thing on the electron documentation :/

    I made more researches on google and that is my result for the preload.js lead he gave me

    thank you for your input

    gui.js

    const { app, BrowserWindow, ipcMain } = require("electron");
    const path = require('node:path');
    
    let leftWindow = null;
    let rightWindow = null;
    
    const createWindows = (win, page) => {
        win = new BrowserWindow({
            width: 1024,
            height: 600,
            resizable: false,
            fullscreen: true,
            webPreferences:{
                preload: path.join(__dirname, 'preload.js'),
            },
        });
    
    
        ipcMain.handle('generatePassword', (req, data) => {
            const password = data.keyWord + Math.random().toString().substr(2, 5)
            return { password }
        })
    
        win.loadFile(page)
    };
    
    app.whenReady().then(() => {
        //createWindows(leftWindow, "dash.html");
        createWindows(rightWindow, "controls.html");
    });
    
    app.on('window-all-closed', () => {
        if(process.platform !== 'darwin') {
            app.quit()
        }
    })
    

    preload.js

    const { contextBridge, ipcRenderer } = require('electron')
    
    contextBridge.exposeInMainWorld('electronAPI', {
        createPassword: (data) => ipcRenderer.invoke('generatePassword', data)
    })
    

    render.js

    const keyWord_el = document.getElementById('keyWord');
    const btn_el = document.getElementById('btn');
    
    btn_el.addEventListener('click', async () =>{
        const keyWord = keyWord_el.value;
        
        const res = await electronAPI.createPassword({ keyWord })
    
        document.getElementById('passWord').innerText = res.password
    })
    

    controls.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Controls</title>
            <script defer src="render.js"></script>
            <link rel="stylesheet" href="./public/styles.css" />
        </head>
        <body>
            <div id="content">
                <input id="keyWord" type="text" placeholder="Enter Data">
                <button id="btn">Test</button>
                <h1 id="passWord">Random String</h1>
            </div>
           <script type="text/jsx" src="./public/controlApp.jsx"></script>
        </body>
    </html>