I am Trying to run html page with electron + eel.
I have successfully loaded the webpage + eel.js.
My Problem is whenever I try to use require module in the javascript of the HTML page. it gives me the below:
Uncaught ReferenceError: require is not defined
The sequence is, launching the webapp using runner.py ( eel.start ), then electron start
Also, if I set mainWindow.loadFile('templates/index.html') in main.js file, instead of mainWindow.loadURL('http://localhost:8000/index.html'). the render just work fine and can handle electron window from main html javascript file. but eel is not loaded in this case.
If I tried the steps which in the guide. the electron html page opens normally with eel.js loaded up. but can not handle the electron window from html javascript file
runner.py
import eel
import eel.browsers
eel.init('templates')
eel.browsers.set_path('electron', 'node_modules/electron/dist/electron')
eel.start('index.html', mode='electron' , port=8000 ,host='localhost',disable_cache=True)
main.js:
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
enableRemoteModule: true
}
})
// and load the index.html of the app.
// mainWindow.loadFile('templates/index.html')
mainWindow.loadURL('http://localhost:8000/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.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS 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()
})
})
// 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', function () {
if (process.platform !== 'darwin') app.quit()
})
// 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 require them here.
html javascript:
function login_check(){
var serverIP = document.getElementById('serverIP').value
var Username = document.getElementById('usernameEntry').value
var Password = document.getElementById('passwordEntry').value
var RememberMe = document.getElementById('remember-me-checkbox').checked
if(serverIP != "" && Username != "" && Password != ""){
document.querySelector('.progress-bar-container-div').classList.add('active')
}
else{
const window = require("electron").getCurrentWindow()
alert("Required Fields are empty.")
document.querySelector('.progress-bar-container-div').classList.remove('active')
window.minimize();
}
}
package.json:
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^5.0.0"
}
}
error:
