Electron nodeIntegration not working, also general weird Electron behavior

user_5767178 0
Viewed 3602

I'm new to Electron, and I've really been struggling with getting it to work. I'm experiencing behavior I cannot explain, so here's a sum: I cannot get the communication between Electron and the html to work

"Uncaught ReferenceError: require is not defined" inside the website, even though I have nodeIntegration:true

File Tree:
./
index.html
index.js
package-lock.json
package.json
node_modules/

index.js:

const electron = require("electron");
const Ffmpeg = require("fluent-ffmpeg");
const CmdExec = require('child_process');
const {
    app,
    BrowserWindow,
    ipcMain
} = electron;

function createWindow() {
//If I put the main window ini into here, and then call app.on("ready", createWindow()); app says
//"Cant create window before ready", even though I just moved the funcion from inside ready to here..
}

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL(`${__dirname}/index.html`);
});
ipcMain.on("video:submit", (event, path) =>{
    CmdExec.exec("echo hello", (value)=>{console.log(value)});
});

html:

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <h1>WELCOME!</h1>
    <script src="" async defer></script>
    <form action="">
        <div>
            <br>
            <label for=""></label>
            <input type="file" accept="video/*" name="" id="">
        </div>
        <button type="submit">get info</button>
    </form>

    <script>
        const electron = require("electron");

        electron.send('perform-action', args);

        document.querySelector("form").addEventListener("submit", (event) => {
            event.preventDefault();
            const {path} = document.querySelector("input").files[0];
            window.api.send("video:submit", path);
        });
            //Tried multiple methos Ive found on stackoverflow,, dont think I implemented them right 
            //though
    </script>
</body>

</html>

package.json:

{
  "name": "media_encoder",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^12.0.0"
  }
}
electron node.js javascript
1 Answers

Electron 12 is now defaulting contextIsolation to true, which disables Node (here are the release notes; and here's the PR).

Here's a discussion of this change. nodeIntegration for what it's worth is going to be removed in a future Electron version.

The easiest way to fix this is to simply disable context isolation:

mainWindow = new BrowserWindow({
      webPreferences: {
          nodeIntegration: true,
          contextIsolation: false
     }
});

That being said, you might want to consider keeping contextIsolation enabled for security reasons. See this document explaining why this feature bolsters the security of your application.

user_34794560
Related