Preload Script not runnning/working properly with Electron-CodePudding

I've been trying to get a preload script to run on my Electron app but it appears to either not be running at all or just not working properly.

I currently have a main file, a preload file, a render file, and a html. I'm just trying to do the stuff from the Electron tutorial on using preload files, so right now my code is something like this:

// main.js

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

let mainWindow;

const createWindow = () => {
    // Create a window
    mainWindow = new BrowserWindow({
        show: false,
        autoHideMenuBar: true,
        webPreferences: ({
            preload: path.join(__dirname, 'scripts', 'preload.js'),
            nodeIntegration: true,

        }),
    });
    mainWindow.maximize();
    mainWindow.show();

    // Load HTML into window
    mainWindow.loadFile('index.html');

    // Open Dev Tools
    // mainWindow.webContents.openDevTools();
    console.log(versions);
}

// preload.js

const {contextBridge} = require('electron');

contextBridge.exposeInMainWorld('versions', {
    node: () => process.version.node,
    chrome: () => process.version.chrome,
    electron: () => process.version.electron,
});

Index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
        http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'"
    />
    <meta
        http-equiv="X-Content-Security-Policy"
        content="default-src 'self'; script-src 'self'"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Test</title>
</head>

<body>
    <h1>Test</h1>
    <p id="info"></p>
    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="render.js"></script>
</body>

// render.js

const information = document.getElementById('info');
information.innerText = `This app is using Chrome (v${versions.chrome()}), 
                            Node.js (v${versions.node()}), and Electron (v
                            ${versions.electron()})`

Currently my output on the HTML from render.js is "This app is using Chrome (vundefined),Node.js (vundefined), and Electron (vundefined)" and my console.log line in main.js throws up a ReferenceError stating "versions is not defined". Anybody able to shine some light on how I could fix this? Thanks in advance.

CodePudding user response：

I think you made a typo: In your preload script

contextBridge.exposeInMainWorld('versions', {
    node: () => process.version.node,
    chrome: () => process.version.chrome,
    electron: () => process.version.electron,
});

Should be (add a "s" to process.version

contextBridge.exposeInMainWorld('versions', {
    node: () => **process.versions.node,
    chrome: () => **process.versions.chrome,
    electron: () => **process.versions.electron,
});

Can have a look to the docs: https://www.electronjs.org/docs/latest/api/process