Menu
I am following the Electron quick start guide, it works without any errors, but the output is not as described in the docs, the versions with document.write wont show up in the output.
This is my output:
Hello World!
We are using node , Chrome , and Electron .
My expected output would include the corresponding version numbers.
I have checked the GitHub page of the app, still the same, tried various StackOverflow answers but none worked for me.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node) </script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron) </script>.
</body>
</html>
package.json
{
"name": "electronapp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "harsh",
"license": "ISC",
"devDependencies": {
"electron": "^5.0.2"
}
}
main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin')
app.quit()
})
app.on('activate', function () {
if (mainWindow === null)
createWindow()
})
I have Node globally installed, and Chrome is packaged with Electron, right?
902
If you activate the Developer Tools, you should see error messages in the Console like such:
Uncaught ReferenceError: process is not defined
at index.html:11
You need to activate nodeIntegration and deactivate contextIsolation of the BrowserWindow, so that the process running in the BrowserWindow ("renderer process") is allowed to access Node's process object.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
(Before Electron 12, only the nodeIntegration key was needed, and the default value of contextIsolation was false.)
142
This is your file with correction
const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// I think you don't need this line
// preload: path.join(__dirname, 'preload.js')
nodeIntegration: true
}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})
After a lot of searching I found this:
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
Note that contextIsolation was false by default until Electron 12, released Feb 2021.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
