0

I'm starting with electron and for some unknown reason I can't use require() function in renderer process.

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

package.json

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "author": "your name",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "electron": "^12.0.2"
  }
}

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const ipc = ipcMain;

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntergration: true, 
      contextIsolation: false,
      devTools: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
  
    win.webContents.openDevTools()

  ipc.on("closeApp", ()=>{
    console.log("clicked on Close btn")
    win.close();
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
    <button id="closeBtn">close</button>
    
    <script defer src="index.js"></script>
</body>
</html>

index.js

const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;

var closeBtn = document.getElementById('closeBtn');

closeBtn.addEventListener("click", ()=>{
    ipc.send("closeApp");
});

Screenshot of my program

I am doing everything like in the tutorial, I have searched for solution for two days and tried everything, nothing works. I am worried that only I have that problem :v

3
  • 1
    I think that's because nodeIntegration is disabled. Maybe the tutorial is old.
    – D. Pardal
    Apr 10, 2021 at 22:17
  • weird. This would typically happen if either node was disabled or context isolation was enabled, but it looks like you're enabling/disabling them correctly. Are you sure that the code you posted matches exactly what you have?
    – pushkin
    Apr 10, 2021 at 23:54
  • Yes, I've checked 3 times. Should I reinstall node.js? Apr 11, 2021 at 0:32

2 Answers 2

2

There's a typo in nodeIntegration (you spelled it nodeIntergration). That's probably the problem

0

Maybe try to get the ipcRenderer from the preload.js script and then expose it to the environment using a contextBridge.

//preload.js
const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("myappvar",{
  close:()=>ipcRenderer.invoke("closeApp"),
});

then after this, in your main you can create an ipcMain to handle the closeApp call, and also anywhere else in your app you can reference the function using myappvar.close() or window.myappvar.close()

An example of main:

// main.js
const { app, ipcMain } = require('electron')


/* omitted some code stuff before */

ipcMain.handle('closeApp',()=>{
    if (process.platform !== 'darwin') app.quit();
})

/* More stuff after */

Also lastly, as another user @bubs16458 has pointed out in this comment, try fixing your typo from nodeIntergration to nodeIntegration


Try these and see if it all works out for you! Nice day!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.