CODEWITHSUNDEEP
javascriptnode.jselectronipc
haxonek
haxonek

Reputation: 301

"TypeError: Cannot read property 'on' of undefined" when making an ipc call in electron

I'm trying to make an ipc call (from renderer to main) in electron/node.js on my mac however it's not recognizing the on call. If I comment out the ipc.on() function everything works, but the function appears to be the same as in the example I'm following.

I read that this might be because of a missinstallation so I made sure to uninstall node and npm from brew and reinstalled it using their installer.

Some of these files are longer, so I'm just commenting what's relevant.

main.js

// Modules to control application life and create native browser window
const electron = require("electron");
const path = require('path')
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const ipc = app.ipcMain;

let mainWindow

... createWindow() call

ipc.on('connect-to-instance', function(event) {
    console.log('buton pressed')
})

... more app.on calls

renderer.js

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

const connect = document.getElementById('connect-button')

connect.addEventListener('click', function(){
    ipc.send('connect-to-instance');
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Test App</title>

    </head>
    <body>

        <div class="container">
            <h1 class="header-title">Please Enter an Instance</h1>

            <form class="forms-body">
                <div class="connect-container">
                    <input class="connect-bar" id="inputURL" type="text" name="instance_name">
                    <button class="connect-button" id="connect-button">connect</button>
                </div>
            </form>
        </div>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

This should be calling the ipc.on function and logging the message, however whenever I start it I get the error

$ npm clean-install
$ npm start

> [email protected] start /Users/MyName/Code/test_app
> electron .

App threw an error during load
TypeError: Cannot read property 'on' of undefined
    at Object.<anonymous> (/Users/MyName/Code/test_app/main.js:44:5)
    at Module._compile (internal/modules/cjs/loader.js:880:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
    at Module.load (internal/modules/cjs/loader.js:735:32)
    at Module._load (internal/modules/cjs/loader.js:648:12)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at loadApplicationPackage (/Users/MyName/Code/test_app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:109:16)
    at Object.<anonymous> (/Users/MyName/Code/test_app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:880:30)

instead. I'm new to electron and would appreciate any help you can offer, thanks!

Upvotes: 0

Views: 3958

Answers (1)

haxonek
haxonek

Reputation: 301

Subburaj was right, I have to use the line

const ipc = require('electron').ipcMain

or 

const ipc = electron.ipcMain

The guide I was following must have been incorrect.

Upvotes: 1

Related Questions