Electron non-context-aware native module in renderer issue

Issue

I have tried many things and can not seem to get the robotjs code to execute even with rebuild, and other examples I’ve seen to try.

I still get the Loading non-context-aware native module in renderer error.

I have a button, and on click of the button I want the robotjs code to be executed.

Here is my current code :

bot.js

        const robot = require('robotjs')
    const electron = require('electron')
    const ipc = electron.ipcRenderer
    
    const Bot = () => {
        const button = document.getElementById('start');
        // button.addEventListener('click', () => console.log('Click'))
        button.addEventListener('click', function (e) {
            // Get mouse position.
            var mouse = robot.getMousePos();
    
            // Get pixel color in hex format.
            var hex = robot.getPixelColor(mouse.x, mouse.y);
            console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y);
        });
    
    }
    
    Bot();

My main file :
index.js

    const { app, BrowserWindow, ipcMain } = require('electron');
    const robot = require('robotjs')
    const path = require('path');
    // const Bot = require('./bot')
    // Handle creating/removing shortcuts on Windows when installing/uninstalling.
    if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
      app.quit();
    }
    
    const createWindow = () => {
    
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true,
        }
      });
    
      // and load the index.html of the app.
      mainWindow.loadFile(path.join(__dirname, 'index.html'));
    
      // Open the DevTools.
      mainWindow.webContents.openDevTools();
    };
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow);
    
    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
    
    app.on('activate', () => {
      // On OS X it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
      }
    });
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and import them here.

Here is the index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="index.css" />
 </head>
 <body>
  <div class="App">
   <div class="Header">
    <h1>Checkout-Bot</h1>
   </div>
   <div class="Wrapper">
    <p>Click Start</p>
    <button id="start">Start</button>
   </div>
  </div>

  <script src="bot.js">
   Bot();
  </script>
 </body>
</html>

Solution

Have you read this issue on Github?

They removed the ability to use non-NAPI and non-context aware modules.

If you’re not using Electron 11 yet, you can still use those modules, if you add the following line in the main process:

app.allowRendererProcessReuse = false

Answered By – AlekseyHoffman

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.